ID選擇器爲什麼利用類選擇器？

-1

給定一個具有類和ID的元素;如果我將一個具有類選擇器的CSS應用於某個元素，並使用某個具有ID選擇器的CSS覆蓋它，則會應用更高版本。ID選擇器爲什麼利用類選擇器？

<a class='abc' id='def' href="#"></a> 
<style> 
.abc{ 
    color:red; 
} 
#def{ 
    color:blue; 
} 
</style>

爲什麼ID選擇器利用類選擇器？

來源

2015-04-04 Narender Choudhary

ID只返回一個元素，因此在找到ID後停止搜索。多個元素可以有相同的類，所以搜索繼續，直到DOM的末尾 – 2015-04-04 08:20:30

你真正要求的與jQuery完全不相關，它只是CSS特異性 – adeneo 2015-04-04 08:21:29

但是我有一個類和一個ID – 2015-04-04 08:21:34

如果我給相同的風格上課，一樣的風格，以標識爲什麼它採取 ID風格

這已無關的jQuery和一切與CSS Specificity。

特定性是瀏覽器決定哪些屬性值與元素最相關並被應用的方式。

換句話說，一定選擇有比別人更高的優先級，在此爲了

內嵌樣式
ID選擇
類選擇，僞類，屬性選擇器
通用選擇

請注意，將樣式應用於ID將比將樣式應用於clas更具體ses，並因此覆蓋其他樣式，並且內聯樣式將覆蓋在外部樣式表中設置的樣式。

如果特異性是一樣的，樣式的順序將決定使用哪種樣式，後者採用了前等

來源

2015-04-04 08:27:03 adeneo

一個想法的小例子：[fiddle]（http://jsfiddle.net/ccrv3cuh/1/）。 – Regent 2015-04-04 08:31:26

相比類的屬性，僞類沒有優先級。他們都有相同的優先權。 – Alohci 2015-04-04 11:49:20

@Alohci：你將有MDN的貢獻者爲此負責。我想知道有多少讀者被這篇文章誤導了，什麼時候有人要介入並修復它。（我說這完全意識到[我是問題的一部分]（https://en.wikipedia.org/wiki/Bystander_effect）...） – BoltClock 2015-04-05 04:13:07

的OP的代碼不包括任何的jQuery/JavaScript的好，所以一個解釋這個問題的方法僅僅是用CSS來表示。

但是爲了以jQuery/javascript的方式回答這個問題，你必須考慮跨瀏覽器的兼容性。

在jQuery中使用ID選擇器基本上轉換爲vanilla-javascript document.getElementByID，這非常普遍。

但是，在jQuery中使用CSS類選擇器理想地轉換爲vanilla-javascript document.getElementsByClassName。

但實際上它可能比您想象的要多。

例如，如果檢出http://caniuse.com/#feat=getelementsbyclassname，則可以看到IE8不完全支持getElementsbyClassName（）。

jQuery的工作是讓這些瀏覽器差異透明。

總之，選擇器越複雜，jQuery需要解決跨瀏覽器差異的機會就越高。

來源

2015-04-04 08:31:57

ID選擇器爲什麼利用類選擇器？

回答

相關問題