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

问题描述：

给定一个具有类和ID的元素;如果我将一个具有类选择器的CSS应用于某个元素，并使用某个具有ID选择器的CSS覆盖它，则会应用更高版本。ID选择器为什么利用类选择器？

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

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

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，并因此覆盖其他样式，并且内联样式将覆盖在外部样式表中设置的样式。

如果特异性是一样的，样式的顺序将决定使用哪种样式，后者采用了前等

一个想法的小例子：[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需要解决跨浏览器差异的机会就越高。

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

相关推荐