混淆CSS規則優先

我有這個（簡化）標記：混淆CSS規則優先

<ul id="topnav"> 
    <li>one</li> 
    <li>two</li> 
    <li id="last-nav">last</li> 
</ul>

這些CSS規則：

#topnav li { 
    list-style-type: none; 
    float: left; 
} 

#last-nav { 
    float: right; 
}

令我驚訝的是，第二條規則是第一個否決。如果我將選擇器更改爲li#last-nav，它可以工作。這是爲什麼？

（聲明：我只在Firefox中測試了這個）

來源

2010-11-12 Benjamin Wohlwend

哇，謝謝你們所有這些偉大的答案！有時我討厭我只能接受一個答案的事實。 – 2010-11-12 15:28:51

級聯是這樣的：

更重要的規則適用。
如果同樣重要，則更具體的規則適用。
如果同樣具體，則適用後者的規定。

這裏，#topnav li具有101 specificity，並#last-nav具有100的特異性，所以第一個獲勝。 li#last-nav或#topnav #last-nav的選擇器會更具體。

來源

2010-11-12 15:15:09

固定答案+1 – annakata 2010-11-12 15:16:30

li＃last-nav將具有同樣的特定性，但會優先考慮，因爲它後來以自上而下的順序排列，但除此之外，這大部分都是正確的。我不喜歡將CSS特定值顯示爲單個數字，因爲它不是。它是4的組合（當你計算內聯樣式時），所以它更像1 | 0 | 1和1 | 0 | 0。 – RussellUresti 2010-11-12 15:20:11

@Russell好點;我想我最後一次讀到特異性（是否很久以前？），它使用的是舊的符號，只有三個值，沒有分隔符。 – 2010-11-12 15:22:07

最後一條規則具有較低的特異性。嘗試更改爲：

li#last-nav { }

FYI：您可以使用此工具計算的特殊性：Specificity Calculator

來源

2010-11-12 15:14:54 bmancini

用途：

#topnav #last-nav { 
    float: right; 
}

或

#last-nav { 
    float: right !important; 
}

來源

2010-11-12 15:14:56

閱讀上的CSS特異性：

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
http://meyerweb.com/eric/css/link-specificity.html

本質上，第一選擇比第二更具體的，所以它的優先級。這不是關於CSS中的自上而下的順序。自上而下的順序只適用於兩個選擇器同樣具體的情況。

來源

2010-11-12 15:15:06 RussellUresti

你可以用特異性來解釋這一點。

把它看成是這樣的：

Elements etc: 0, 0, 0, 1 
Classes: 0, 0, 1, 0 
IDs: 0, 1, 0, 0 
Inline: 1, 0, 0, 0 

#topnav li = 0, 1, 0, 1 
#last-nav = 0, 1, 0, 0

所以#topnav裏更爲具體，因而收益的優先級。

當然級聯和inhertence甚至使用的！重要的是可以採取對CSS，但在這種情況下等作用，#topnav李只是更具體

來源

2010-11-12 15:17:57

我不知道，但我懷疑，即第一條規則優先，因爲它被應用於特定元素（在本例中爲li）。第二個規則理論上可以應用於任何ID爲last-nav的元素。

特異性規則可以開始發揮作用：

現代瀏覽器很可能讓你得逞的：

#topnav li:last-child {

浮動：權利; }

...並達到相同的結果，你想要的。

HTH，

摹

來源

2010-11-12 15:18:15 dartacus

它與你的第一個樣式比你的第二個更專一。查看this site瞭解更多詳情。爲了讓您的第二個樣式正常工作，請嘗試使用：

#topnav #last-nav

來源

2010-11-12 15:19:06

選擇規則：計算特異性

樣式表也可以基於其特異性的水平，而具體的風格將覆蓋衝突的樣式表總是贏得一個不太具體的。這只是計算選擇器特異性的計數遊戲。

計算選擇器中ID屬性的數量。
計算選擇器中CLASS屬性的數量。
計算選擇器中HTML標籤名稱的數量。

最後，按照確切的順序寫出三個數字，不要用空格或逗號來獲取三位數字。（請注意，您可能需要將數字轉換爲較大的基數，最後以三位數字結尾）。對應於選擇器的最終數字列表將很容易確定特異性，較高數字勝過較低數字。以下是特異性分類選擇列表：

#id1   {xxx} /* a=1 b=0 c=0 --> specificity = 100 */ 
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */ 
LI.red  {xxx} /* a=0 b=1 c=1 --> specificity = 011 */ 
LI   {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

在您的例子#topnav li是101 #last-nav只有100，所以101勝。

引用自http://htmlhelp.com/reference/css/structure.html

來源

2010-11-12 15:22:06 methodin

我認爲你的意思是'#topnav是100'，而不是'#topnav li是100'。（最後一句話） – KajMagnus 2011-03-10 18:21:49

我認爲他的意思是'＃last-nav' - 我編輯了答案來反映這一點。 – Tom 2012-08-12 10:16:21

混淆CSS規則優先

回答

相關問題