为什么ID选择器会利用类选择器？

Question

给定一个带有类和ID的元素;如果我将一些带有类选择器的CSS应用于元素，并使用带有ID选择器的CSS覆盖它，则应用后者。

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

为什么ID选择器会利用类选择器？

Answer 1

  

如果我给同一种风格的类和相同的风格，为什么它采取   ID样式

这与jQuery无关，而与CSS Specificity无关。

特异性是指浏览器决定哪些属性值与元素最相关并且可以应用的方式。

换句话说，某些选择器的优先级高于其他选择器

1. 内联样式
2. ID选择器
3. 类选择器，伪类，属性选择器
4. 通用选择器

请注意，将样式应用于ID将比将样式应用于类更具体，因此会覆盖其他样式，而内联样式将覆盖外部样式表中设置的样式。

如果特异性相同，则样式的顺序将决定使用哪种样式，后者应用于前者等。

Answer 2

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需要解决跨浏览器差异的可能性越大。