推薦CSS符號

3

有a great doco，注重規則，過於合格的選擇：

ID選擇被定義獨一無二的。包括標籤或類別限定符只是增加了需要評估的冗餘信息不必要的。

而不只是id爲main應用樣式的元素，你的選擇會檢查它是否也是一個div（按順序）重新獲得資格認證的元素。爲了澄清：CSS選擇進行評估，以左，不像同一個選擇語法權的jQuery等使用時

重新pixelistik的建議，即div#main更具體的比#main - 是的，這在技術上是正確的，但如果你有通過這種方式來提高規則的特異性，你正在研究的CSS的結構可能並不像應該那樣被認爲是可行的。

來源

2012-05-28 22:37:26

2

所以區別在於：

當您編寫div#main樣式時將只針對<div>元素。當你寫#main它可以作爲風格<div>，<span>，<p>等

什麼建議就很難說了，每個開發者有其不同的。所以我使用例如 span.<nameClass>當嵌套在<li>例如。

#nav li span.href a { 
... 
}

我認爲這是使用時，你希望某人具有特定名稱的類只能有一個元素。

所以，當你寫span#href它只適用於<span id="href">Simply dummy text</span>不適用於其他人。當您編寫#href時，它將適用於<span id="href">Simply dummy text</span>或<a href="#" id="href">Link</a>，但當您也詢問此問題時，兩者都是正確的。上面寫的差異。

來源

2012-05-28 22:25:58 Sajmon

+0

謝謝，但與提供的代碼有關？兩個divs。 – Teson

+0

so edited man :-) – Sajmon

+0

ID碰撞？我永遠不會去那裏... – Teson

2

#main匹配ID爲'main'的所有內容，而div#main僅匹配ID爲main的<div>元素。

理想情況下，你不應該有兩個具有相同ID的元素，所以實際上這兩個沒有區別，但可能與性能相關的問題是關於指定div是否使其更快地找到結果。

來源

2012-05-28 22:26:52 Death

+2

實際上使其變慢。正如我在下面的回答中所說的那樣，css選擇器被解析爲RTL，這意味着在找到一個id爲「main」的元素時，呈現引擎將不得不檢查它是否也是「div」。雖然圍繞此的努力可以忽略不計，但我更擔心結構的影響和可能不必要的特異性覆蓋。 –

+2

@ o.v。在瀏覽器通過ID發現它之後檢查元素的類型與RTL解析無關。 RTL解析適用於組合器。 – BoltClock

+0

@BoltClock：考慮兩種情況，當一個'#aaa .bbb'被渲染引擎評估，並且它被用來匹配DOM元素w/JS。在第一種情況下，首先找到匹配'.bbb'的所有元素，然後通過查找其父級（RTL）進行重新驗證。在第二種情況下，（快速）找到匹配'＃aaa'的元素，然後搜索它的後代以匹配'.bbb'。這就是我所說的* css選擇器被解析爲RTL * - 兩種極端不同的方式來解決同樣的問題。我不知道爲什麼，我只是順其自然:) –

1

兩者都是正確的。

div#main比#main更具體，這意味着用第一個選擇器定義的樣式將覆蓋第二個選擇器的樣式。

這裏有一個很好的介紹CSS的特異性：使用高效的CSS選擇 http://htmldog.com/guides/cssadvanced/specificity/

來源

2012-05-28 22:29:29 pixelistik

回答

相關問題