导航

🔥 CSS 选择器

基础选择器

ID 选择器	`#app`
类选择器	`.container`
标签选择器	`div`、 `p`
一般兄弟选择器	`p ~ span`	匹配同一父元素下，`p` 元素后的所有 `span` 元素
紧邻兄弟选择器	`h1 + p`	紧贴在 `h1` 后面的第一个 `p` 标签。同级标签，之间不能有其他标签
并集选择器	`.one, p`	给类名为 `one`，标签为 `p` 标签的元素共同设置
子代选择器	`ul > li`	`ul` 标签下的下一个层级的 `li` ，并不是所有
后代选择器	`li a`	和子代选择器不同，可以选择多层嵌套的后代元素，无论嵌套层次有多深
通配符选择器	`*`

名称	语法	说明	例子
简单属性选择器	`element[attribute]`	选择具有指定属性的元素，无论属性值是什么	`a[href]`会选择所有带有 `href` 属性的 `<a>` 元素
具体属性值选择	`element[attribute="value"]`	选择具有指定属性且属性值完全匹配的元素	`input[type="text"]` 会选择所有 `type` 属性值为 `"text"` 的 `<input>` 元素
部分属性值选择（包含特定词汇）	`element[attribute~="value"]`	选择属性值中包含指定词汇的元素。属性值可以是用空格分隔的多个值，只要其中一个值包含指定词汇，该元素就会被选中	`p[class~="important"]` 会选择 `class` 属性值中包含 `"important"` 的 `<p>` 元素

备注: p 标签的 class 属性中得包含 important 这个单词，且此单词必须独立存在。

优先级：
- 同权重下: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
- !important > id > class > tag
- !important 比内联优先级高
同权重下：
- 优先级就近原则，样式定义最近者为准
- 载入样式以最后载入的定位为准

Untitled

.mod-nav header h3 span {}

.mod-nav ul a {}

匹配规则：

**因为写样式是可以越级设置的，**例如 .mod-nav ul a 的这个 a 不一定是直接挂载到 .mod-nav 下的 li 上的，有可能像上图所示在其很深层级的位置。

CSS选择器的匹配规则的解析是一个从右向左的过程，这样的解析顺序是出于性能优化的考虑。以下是详细解析原理和原因：

解析原理

1. 从右向左匹配的步骤

假设有一个选择器 div ul > li a.active：

2. 优化原因

这种从右向左的匹配方式主要是为了优化选择器的性能：

减少不必要的查找：从右向左匹配能够立即定位具体的元素，从而避免从文档根部开始的全局搜索。假设选择器是从左到右匹配，会从文档根部开始搜索所有 <div>，然后查找每个 <div> 下的 <ul>，再查找 <ul> 下的 <li>，最后检查 <li> 下是否有符合条件的 <a>。这可能导致大量无效的查找。
降低复杂度：CSS 引擎可以快速排除不符合条件的元素。例如，选择器 .active 可以迅速筛选出特定的 <a> 元素，大大减少需要进一步检查的元素数量。

示例解释

假设有以下 HTML 结构：

<div>
  <ul>
    <li><a class="active">Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>

对于选择器 div ul > li a.active：

最右边选择器 .active：查找所有带 class="active" 的 <a> 元素，找到 <a class="active">Link 1</a>。
过滤父元素 <li>：确定这个 <a> 是否在 <li> 内，是的，继续。
检查父元素 <ul> 的子元素关系：确认这个 <li> 是直接子元素 <ul>，是的，继续。
最终检查 <div> 元素：确认这个 <ul> 是否在 <div> 内，是的，匹配成功。

实际性能影响

这种从右向左的解析方式减少了不必要的查找和遍历，提高了选择器匹配的效率。因为浏览器引擎可以在找到潜在匹配的元素后，逐步验证其祖先元素是否符合条件，从而避免了大量无效的元素检查。

总结：

从右向左匹配的解析顺序是为了优化选择器的性能，使得浏览器可以快速排除不符合条件的元素，并减少不必要的全局查找和遍历，提高渲染效率。