css选择器都有哪些？各种选择器优先级大小顺序

Posted 2023-05-10

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语，标志符表示"带有类名的元素"。

ID属性

ID属性的操作类似于CLASS属性，但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是，ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。

通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中，样式通常是基于在html源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

参考技术A CSS选择器如下：
　　1. 标签名选择器 div color：Red; /即页面中的各个标签名的css样式
　　2.类选择器 .divClass color:Red; /即定义的每个标签的class 中的css样式
　　3.ID选择器 #myDiv color:Red; /即页面中的标签的id
　　4.后代选择器（类选择器的后代选择器） .divClass span color:Red; /即多个选择器以逗号的格式分隔 命名找到准确的标签
　　5.群组选择器 div,span,img color:Red /即具有相同样式的标签分组显示
　　选择器的优先级
　　1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>
　　2.次优先级是（ID选择器 ,假设级别为100） #myDivcolor:Red;
　　3.其次优先级是（类选择器，假设级别为10） .divClasscolor:Red;
　　4.最后优先级是 （标签选择器，假设级别是 1） divcolor:Red;
　　5.那么后代选择器的优先级就可以计算了啊
　　比如 .divClass span color:Red; 优先级别就是：10+1=11本回答被提问者采纳

CSS组合子优先级？

【中文标题】CSS组合子优先级？

【英文标题】：CSS combinator precedence?

【发布时间】：2011-04-20 13:55:46

【问题描述】：

像这样的组合子有优先级吗

a > b ~ c d

（注意c和d之间的空格是后代组合子）

还是只是从左到右阅读，比如

((a > b) ~ c) d

?

【参考方案1】：

不，组合器中没有优先级的概念。但是，复杂选择器中存在元素顺序的概念。

任何复杂的选择器都可以从任何对你有意义的方向读取，但这并不意味着组合符是distributive 或commutative，因为它们是indicate a relationship between two elements，例如ancestor descendant 和 previous + next。这就是为什么元素的顺序很重要的原因。

According to Google，然而，浏览器实现它们的选择器引擎，以便它们评估复杂的选择器从右到左：

引擎 [Gecko] 从右到左评估每个规则，从最右边的选择器（称为“键”）开始，遍历每个选择器，直到找到匹配项或丢弃规则。

Mozilla 的文章Writing Efficient CSS for use in the Mozilla UI 有一节描述了他们的 CSS 引擎如何评估选择器。这是 XUL 特有的，但相同的布局引擎用于 Firefox 的 UI 和显示在 Firefox 视口中的页面。 （死链接）

正如谷歌在上面引用中所描述的，键选择器只是指最右边的简单选择器序列，所以它也是从右到左：

样式系统从键选择器开始匹配规则，然后向左移动（在规则选择器中查找任何祖先）。只要选择器的子树继续检出，样式系统就会继续向左移动，直到它匹配规则，或者因为不匹配而放弃。

记住两点：

这些是根据实施细节记录的；本质上，选择器就是一个选择器，它所要做的就是匹配一个满足特定条件的元素（由选择器的组件布置）。读取的方向取决于实现；正如另一个答案所指出的那样，the spec 没有说明评估选择器的顺序或组合优先级。

两篇文章都没有暗示每个简单选择器在其简单选择器序列中从左到右进行评估（请参阅this answer了解为什么我认为不是 ）。文章所说的是浏览器引擎将评估键选择器序列以确定其工作 DOM 元素是否匹配它，然后如果匹配，通过跟随组合器进入下一个选择器序列和检查与该序列匹配的任何元素，然后冲洗并重复，直到完成或失败。

---

话虽如此，如果您要我阅读选择器并用简单的英语描述它们选择的内容，我也会从右到左阅读它们（虽然我不确定这是否与实现细节有关！）。

所以，选择器：

a > b ~ c d

意思是：

选择任何d 元素 这是 c 元素的后代 那是 b 元素的兄弟姐妹 这是 a 元素的子元素（直接后代）。

【讨论】：

是的。从右到左，因为最后一个简单的选择器 (d) 是结果的子集。其他简单的选择器（a、b 和 c）只是为了缩小结果范围。

但是假设我有两个 div #A 和 #B，#A 里面有 100 个 span，#B 只有一个。然后从左到右评估div#A span 会更容易并且可能更快然后首先获得所有跨度，或者不？

如果我从我曾经看过的 Youtube 上的一次讲座中没记错的话，ID 选择器会得到特殊处理。如果选择器字符串包含 ID 选择器，则可能存在从右到左规则的分歧。此外，浏览器对所有具有 ID 的元素都有引用（因此它们不必为遇到的每个选择器都搜索它们）。

这里，这个视频和这个问题有关：youtube.com/watch?v=a2_6bGNZ7bA

如果您试图确定刚读入的标签是否需要在向用户显示之前应用任何 CSS 规则，则从右到左是有意义的。这是一个预渲染技巧，正确计算可能非常复杂。这就是为什么 CSS4 的某些部分，例如 :has() 会给 CSS3 引擎带来很大的麻烦。如果您想使用 CSS3 解析器，我这里有一个：github.com/cubiclesoft/ultimate-web-scraper/blob/master/support/… TagFilter::ParseSelector() 将 CSS3 选择器标记为最佳顺序。

【参考方案2】：

没关系。

a > b c 

无论你是否这样做，都会匹配相同的元素

(a > b) c

或

a > (b c)

我认为浏览器是从右到左的。

【讨论】：

将兄弟组合器添加到组合中确实很重要，就像在 OP 的示例中一样。

【参考方案3】：

the spec 没有提到任何关于优先级的内容（我可以找到），但我相信这是严格的从左到右的评估

【讨论】：

是的，我也没有在规范中找到任何东西，这就是我问的原因:)