在樣式元素上使用標題屬性時出現問題

Question

最近遇到一個很奇怪的問題。 當您添加多個樣式元素並且您在樣式元素上添加標題屬性時，在標題中分配了不同的值。 只有第一個樣式元素 css 被應用。

 <.doctype html> <html> <head> <link rel="stylesheet" href="lib/style.css"> <script src="lib/script:js"></script> <style title="Id-1"> h1{color:red} </style> <style title="Id-2"> h2{color:blue} </style> </head> <body> <h1>Hello Red Heading!</h1> <h2>Hello Blue Heading!</h2> </body> </html>

現在，如果您在上面看到簡單的 HTML 代碼。 以下是此代碼工作的可能性 -

當沒有添加標題屬性時 - 它可以工作。
當 title 屬性添加了相同的值或沒有值時 - 它有效。
當我們在標題屬性中分配不同的值時，如代碼所示，只有第一個樣式元素 css 被應用，即 h1 變為紅色，但對 h2 沒有影響。

解決方案是使用data-將標題標記為自定義屬性或數據屬性。 我更想知道這種行為背后的原因是什么。

要查看它的實際效果，我創建了一個 plunkr，您可以訪問這里

Answer 1

這是因為<style>上的title用於提供 styles 的不同子集。 文檔

所以基本上去View > Page Style你會看到id-1和id-2 ：

從文檔：

文檔中的任何樣式表都屬於以下類別之一：

持久性（沒有rel="alternate" ，沒有title="" ）：始終適用於文檔。 首選（沒有rel="alternate" ，指定了title="..." ）：默認應用，但如果選擇了備用樣式表，則禁用。 只能有一個首選樣式表，因此提供具有不同標題屬性的樣式表將導致其中一些被忽略。
Alternate （ rel="alternate stylesheet" , title="..."必須指定）：默認禁用，可以選擇。

在樣式元素上使用標題屬性時出現問題

問題描述

1 個解決方案

解決方案1
5 已采納 2021-06-04 06:30:47

在樣式元素上使用標題屬性時出現問題

問題描述

1 個解決方案

解決方案1 5 已采納 2021-06-04 06:30:47

解決方案1
5 已采納 2021-06-04 06:30:47