ul＃菜單和#menu？

HTML：ul＃菜單和#menu？

<ul id="menu"> 
    <li><a href="" class="active">Portfolio</a></li> 
    <li><a href="">Services</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Testimonials</a></li> 
    <li><a href="">Request a Quote</a></li> 
</ul>

CSS：

ul#menu li { 
    display:inline; 
    margin-left:12px; 
}

是否有使用「ul#menu li」，只是「#menu li」之間的區別嗎？我使用了兩個版本，他們似乎完成了同樣的事情。是否有一個原因，爲什麼大多數教程使用在ID之前添加「ul」？

來源

2012-05-18 anc1revv

這一切歸結爲特異性。一些很好的鏈接：http://reference.sitepoint.com/css/specificity，http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/和http： //www.w3.org/TR/css3-selector/#specificity – j08691

有一個明顯的區別和一個更細微的差別。

的明顯區別在於，#menu目標的所有元素與該ID #menu，而ul#menu僅定位ul元件。如果您只給ID #menu至ul元素，則選擇器將始終具有相同的結果。

有一種潛在的差異，稱爲特異性。這是一種確定在發生衝突時使用哪個規則的方法。所以如果你有這兩條規則：

#menu li {color: blue;} 
ul#menu li {color: red;}

第二條規則會贏，因爲它更具體，文字會變成紅色。特異性規則很複雜，並不總是直觀，但在這種情況下，簡單的結果是ul#menu li比#menu li稍微更具體。如果你只有一個樣式表，這對你來說不太可能是個問題。如果您有多個樣式表，那麼可以弄清楚爲什麼某個規則被忽略;特異性往往是答案。

至於爲什麼大多數教程使用ul#menu，我不知道。（事實上，我只是將你的斷言作爲他們的證據！）我的猜測是他們爲了白癡讀者而使事情變得非常明顯。

來源

2012-05-18 17:32:22 lonesomeday

+1爲答案，另一個+1爲最後一句：D – Andreas

不應該正確的語法爲「#menu ul li」爲什麼「ul」會出現在選擇器之前？ – anc1revv

@ anc1revv由於ul本身具有ID「菜單」。 '#menu ul li'表示'ul'元素中的'li'元素，它在另一個具有''menu''的元素中。 – lonesomeday

對於這些特定元素，呈現的結果不會不同。

然而，ul#menu li是更具體的，因爲它的目標是與父ID #menu和類型ulli類型的所有元素。

想像這樣UL> #MENU> LI選擇

#menu li僅定位與父ID #menuli類型的所有元素。

想像這樣#MENU選擇> LI

在大多數情況下，他們會做同樣的事情。 #menu li不應該對頁面上的其他元素有任何影響，因爲id是特定的，因此，正如在下面的註釋中所建議的，這是不必要的。因此，我會堅持#menu li。

來源

2012-05-18 17:28:03 jacktheripper

ul＃菜單比較昂貴，因爲它會嘗試通過ID獲取該元素來確定#menu是否爲UL，而您不需要執行此操作因爲元素上的ID在文檔中應該是唯一的。你正在製作一個更具體的選擇器，不需要那麼具體，並且需要更長的時間才能匹配。 – ajm

區別在於特異性。 ul#menu更具體，並且認爲規則所針對的元素必須是具有菜單ID的<ul>。假設你將<ul>更改爲<div>，它有一個菜單ID，它不起作用（不改變你的CSS）。此外，如果您僅使用#menu定義某些內容，則可以通過使用ul#menu來使規則更具體，從而添加覆蓋項。你可以在這裏閱讀更多：battle-of-the-selectors-specificity。

來源

2012-05-18 17:31:53 scrappedcola

這兩者之間的特異性差異通常不會產生影響，但我們可以考慮其中的情況。

如果您在一個頁面上有<div id="menu"></div>，而在另一頁上有<ul id="menu"></ul>，並且您在兩個頁面中都使用相同的CSS文件，該怎麼辦？我並不是說這將是一個很好的設計決策，但在這種情況下，ul#menu和#menu之間的區別將很重要。您是否希望CSS適用於所有具有id="menu"或僅具有ul元素的元素與id="menu"？這是區別。

來源

2012-05-18 17:34:25

我想給了相同的答案@jacktheripper，但要增加以下內容：

是，ul#menu li是更具體的，但它也需要更多的分析時間，因爲CSS讀取正確的選擇向左。因此，它挑選出所有元素#menu，然後收集所有UL列表，並從那些列表中選擇包含先前找到的#menu的列表。

使用選擇器的長鏈時，這會產生更大的差異：#mainmenu ul.menu li.current ul li.current（而不是#mainmenu .current .current）。

來源

2012-05-18 17:35:36 feeela

ul＃菜單和#menu？

回答

相關問題