我知道CSS選擇器具有最高的優先級（即.classname< #idname）。我還知道，如果事物具有相同的特異性，那么最后一個調用的語句將具有優先權：.classname1 { color: red; }.classname1 { color: blue; } // classname1 color will be blueHTML類在DOM元素上的排序是否會影響語句優先級？
3 回答
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
我不得不不同意喬恩和沃森的回答，因為...
是的，可以（取決于聲明）
您的問題是：
CSS類在DOM元素上的排序是否會影響語句優先級？
哪個確實取決于所討論的語句。
HTML排序通常不重要
當直接調用一個類（即或）或組合調用（即或）時，以下是等效的：.class1.class2.class1.class2.class2.class1
<div class="class1 class2"></div>
<div class="class2 class1"></div>
可以基于HTML順序影響上述HTML的語句優先級的情況
在HTML中進行排序最重要的地方是在CSS中使用屬性選擇器。
示例1：使用以下代碼嘗試與屬性值匹配的提琴手將不會對字體顏色進行任何更改，并且div由于類的順序，每個字體都會具有不同的屬性：
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
示例2使用以下代碼嘗試與屬性值的開頭匹配的小提琴在第二個中不會改變字體顏色div，并且div由于類的順序，每個字體都會具有不同的屬性：
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
示例3使用以下代碼嘗試與屬性值的末尾匹配的Fiddle不會對first的字體顏色進行任何更改div，并且div由于類的順序，每種字體都將具有不同的屬性：
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
關于“優先”的明確聲明
需要明確的是，在上述情況下，就“陳述優先權”而言，真正受到影響的實際上是該陳述是否確實適用于該元素。但是，由于應用程序在某種意義上是基本優先級，并且由于上述情況是這種應用程序實際上是基于HTML Dom元素上的類的順序（而不是該類的存在或不存在）的情況，我認為值得將此作為答案。
可能有效使用類訂購？
根據BoltClock的評論，這是我想到的想法?？紤]僅兩個類用于根據對不同樣式至關重要的任何因素對樣式進行樣式設置。從理論上講，這兩個類可以使用屬性選擇器的組合來代替使用11個不同的單獨類（實際上，如稍后所述，只有一個類，可能性幾乎是無限的，但我將在稍后討論帖子是關于多個類的排序）。對于這兩個類，我們可以為元素設置不同的樣式，如下所示：
假設這些HTML組合
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
CSS的可能性
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
如果我計算正確，則3個類可以至少提供40個選擇器選項組合。
為了闡明我對“無限”可能性的注釋，如果邏輯正確，則單個類可能已嵌入通過[attr*=value]語法查找的代碼組合。
這一切太復雜了嗎？可能吧。這可能取決于確切實現方式的邏輯。我想帶出的一點是，它是可能的CSS3有類排序是顯著如果需要的話，并計劃于它，它可能不是可怕的錯誤要利用CSS的權力的方式。
- 3 回答
- 0 關注
- 665 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消