當存在特異性時，訂單是否重要？

我是在菜單列表當前頁面（.active），這是我的第一次嘗試：（對於這裏乾淨頁，我把所有的JS Bin）當存在特異性時，訂單是否重要？

.menu li:hover, 
.menu li:focus { 
    border-bottom-color: #000; 
} 

.menu li.active { 
    border-bottom: 10px solid #888; 
}

然而，懸停效果關於選項卡不顯示爲我想要的。所以我改變了下面兩個的順序。

.menu li.active { 
    border-bottom: 10px solid #888; 
} 

.menu li:hover, 
.menu li:focus { 
    border-bottom-color: #000; 
}

同樣在JS Bin

乾杯！它現在按我的意思工作。但是這個問題出現在我的腦海裏。

的.menu li.active特異性比.menu li:hover更高，基本上20 VS 11，但是當.menu li.active是.menu li:hover（第二碼以上的區域）之前爲什麼它僅適用？

這是因爲，對於代碼區域1，我們首先指定了.menu li:hover的邊框顏色，然後我們遇到了.menu li.active，並且它的邊框顏色在懸停時未指定？

（不知道是清晰與否，它是有點難以解釋。）

來源

2015-07-19 chenghuayang

類和僞類具有相同的特異性。因此，.menu li.active與.menu li:hover具有相同的「權重」。

公式，解釋（等等）上CSS Specificity: Things You Should Know和CSS Tricks: Specifics on CSS Specificity：

記如何衡量特異性。「從0開始，爲樣式屬性添加1000，爲每個ID添加100，爲每個屬性添加10個類，或者僞類爲，爲每個元素名稱或僞元素添加1。因此，在 body #content .data img:hover特異性值將是122 （0,1,2,2或0122）：100 #content，10 .data，10 :hover，1 爲body和1 img「

。

適用於您的CSS，它會給這兩個選擇器21。在重量相同的情況下，順序很重要，使用最後一條規則。

要使規則更加具體，您可以使用.menu li.active作爲默認樣式，.menu li.active:hover作爲掛起版本。後者比第一個更具體（31 vs 21），並且將始終應用於懸停，無論CSS文件中的順序如何。

來源

2015-07-19 10:23:33 GolezTrol

當存在特異性時，命令是否重要？

只有當特異性相等時。

.menu li.active的特異性高於。菜單li：懸停，基本上20 vs 11

不，它不是。

Classes and pseudo-classes have equal specificity。

所以兩者都是021（沒有ID選擇器，兩個類或僞類選擇器和一個類型選擇器）。

來源

2015-07-19 10:23:56 Quentin

您可以檢查你的CSS rules，here，您的兩個規則是相同重量左右（均爲0 0 2 1）

重量

來源

2015-07-19 10:29:27

當存在特異性時，訂單是否重要？

回答

相關問題