CSS選擇器中哈希字符的兩種用法有什么區別？

Question

這兩個CSS選擇器有什么區別？

#someId
a#someId

它看似像工作. 選擇器會。 第一個選擇器的意思是“選擇ID為someID的元素”。 第二個是什么意思？ 我認為它的意思是“選擇ID為someID a元素”嗎？ 鑒於頁面上只能有一個具有給定ID的元素，指定標記的目的是什么？ 第二個選擇器是否具有更高的特異性 ？

Answer 1

是的，第二個選擇器具有更高的特異性。

#someId只是一個ID，無論它是什么元素，都會選擇具有該ID的任何元素。 a#someId既是元素又是ID，使其更具體，因為它只會選擇錨定具有該ID a元素。

計算特異性和比較不同選擇器的特異性有一個共同的技巧，即計算ID，類和X，X，X等元素。 最具體的選擇器是具有最高最左邊數字的選擇器（如果是平局，則移動到下一個數字）。

#someId只是一個ID，所以它是1,0,0。

a#someId是一個ID和一個元素，所以它是1,0,1因此更具體。

ID總是比類更具體，而類總是比元素更具體。 Psuedo-elements計為元素，psuedo-classes計為類，用於計算特異性。 從技術上講，256個元素= 1個類，而256個類= 1個ID，但是如果選擇器字符串中發生了如此多的事情，則您會擔心更大的問題。

唯一比ID更具體的內容（包含多個ID的選擇器字符串除外）是具有!important的樣式或通過元素上的style屬性聲明的內聯樣式。

有關CSS特異性的更多信息：

• 關於CSS特異性的細節（CSS技巧）
• CSS特異性（Smashing Mag）
• CSS特異性（MDN）
• 了解CSS特異性（Nettuts）

Answer 2

它的意思是，

選擇一個id為someId a元素

是的，它更具體。

Answer 3

#someId

選擇id 'someId'的元素

a#someId

選擇id 'someId'的錨元素

第一種是更好的方法，假設您使用推薦的唯一id ，並且它執行速度更快（CSS從右到左解析）

這不是在包含id時是否足夠具體的問題，在這種情況下，僅應使用id選擇器。 但是，如果存在類名或嵌套，則更高級別的選擇有助於更准確地定位特定元素。 但是，不要忘記矯枉過正與矯枉過正一樣糟糕 - 這完全取決於平衡。

Answer 4

第二種形式a＃someId是過大的，因為從理論上講，文檔中不應有兩個具有相同ID的元素。

我可以想到使用它的一個原因是，如果你在頁面中有一個元素改變了類型但通過一些Javascript操作保持了相同的id，你想要一些特定ID的CSS。

例如，使用一些jQuery：

 <style>
 p#someId { ....}
 a#someId { ....}
 </style>

 <script>
 $('#someID').replaceWith( '<a id="someId">Now a link</a>');
 </script>
....

<p id='someId'>Not a link</p>