CSS选择器与优先级详解（一）

Posted 2023-05-01

参考技术A CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
html

CSS

执行效果：

b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML

CSS

执行效果：

c.元素选择器：通过note节点名称匹配元素。
HTML

CSS

2.属性选择器：

注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器

示例如下：

实现效果如下：

示例如下：

从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

参考：
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器

jquery 选择器与 css3 选择器的性能

【中文标题】jquery 选择器与 css3 选择器的性能

【英文标题】：Performance of jquery selectors vs css3 selectors

【发布时间】：2012-02-08 07:02:41

【问题描述】：

我对 css3 使用选择器（或一般的简单 css 选择器）相当陌生，我对这些 css 选择器与 jquery 或 javascript 选择器的性能比较感到好奇？

假设你有这样的事情：

css 版本

#someID > div:nth-child(2n)  some css .... 

jquery 版本（编辑）

$("#someID").children(":nth-child(even)").css( some css ....);

尽可能使用 css 选择器通常更快，还是使用 jquery 选择器来调整与一个元素或一组元素相关的 css？主要是当集合变得相当大时。我会假设只有少数几个项目不会有太大的性能差异？

谢谢！

【问题讨论】：

第一个子选择器 ">" 在任何一种情况下都是猪。

这些选择器示例不匹配。第二个示例选择 ID 为 someID 的元素，它是偶数子元素，而第一个示例选择 div，它是 #someID 的偶数子元素。

是的，我想我确实搞砸了 jquery 版本......试图把它放在一起快速。

您的编辑完全改变了问题...$("#someID").children(":nth-child(even)") 执行 两个 选择。

@Matt：我的意思是 jQuery 使用了两个独立的选择器，一个用于过滤选择另一个子的结果。这与您的 CSS 选择器形成对比，后者仅从右到左进行评估，> 组合器链接这两个部分。

【参考方案1】：

jQuery 的选择器引擎与 CSS 共享大部分语法，有效地扩展选择器标准。这意味着您可以将大多数有效的 CSS 选择器（使用 some exceptions）传递给 jQuery，它会很好地处理它们。

jQuery 为支持选择器 API 的现代浏览器优化了有效的 CSS 选择器，方法是将它们直接传递给 document.querySelectorAll()。这意味着您的 jQuery 选择器将与等效的 CSS 选择器具有几乎相同的性能，唯一的开销是 $().css() 和选择器 API 调用。

对于不支持选择器 API 的浏览器，很明显 jQuery 会非常慢，因为它必须自己完成所有繁重的工作。更重要的是，它只会在我上面链接的异常以及浏览器不支持的任何其他 CSS 选择器上失败。

然而，尽管如此，jQuery 总是会变慢，因为浏览器必须运行脚本并对其进行评估，然后才有机会应用和计算您的样式。

毕竟，老实说，即使您有数百个项目，这也不算多——浏览器获取标记的时间可能比渲染样式的时间要长。如果你需要做样式，并且 CSS 支持它，为什么不使用 CSS 呢？这就是最初创建该语言的原因。

【讨论】：

就此而言，CSS3 选择器并不比所谓的“简单”CSS2 和 CSS1 选择器更“高级”或“复杂”。

【参考方案2】：

纯 CSS总是会更快，因为它是在浏览器中完成并经过优化的！

缺点是您使用的浏览器可能不支持某些选择器。见http://caniuse.com/#feat=css-sel3

【参考方案3】：

对我来说，如果我使用 jquery 意味着我想对其施加一些影响，比如

$("#someID:nth-child(even)").css( some css ....).fadeIn('slow');

除此之外，您最好使用 CSS 本身，但无论如何我们几乎看不到它的区别，至少对于一个小范围的系统而言。

我发现这个网站比较了来自不同 javascript 框架的选择器功能，而 jquery 做得很好。

javascript framework selector test