CSS 选择器结构

**简单选择器** 是一个只有一个组件的选择器，例如单个类型选择器、属性选择器或伪类，它不与任何其他选择器组件或组合器组合使用，也不包含任何其他选择器组件或组合器。当简单选择器准确描述元素时，就说该元素与简单选择器匹配。任何包含单个 基本选择器、属性选择器、伪类 或 伪元素 选择器的选择器都是简单选择器。

#myId {
}

[pattern*="\d"] {
}

**复合选择器** 是 简单选择器 的序列，这些选择器之间没有用 组合器 分隔。复合选择器表示对单个元素的一组同时条件。当元素与复合选择器中的所有简单选择器匹配时，就说该元素与复合选择器匹配。

a#selected {
}

[type="checkbox"]:checked:focus {
}

在复合选择器中，类型选择器 或 通用选择器 必须位于选择器序列的开头。序列中只允许一个类型选择器或通用选择器。由于空格表示 后代组合器，因此在构成复合选择器的简单选择器之间不允许有空格。

**复杂选择器** 是一个或多个简单选择器和/或复合选择器的序列，这些选择器之间用组合器分隔，包括空格 后代组合器。

复杂选择器表示对一组元素的一组同时条件。

a#selected > .icon {
}

.box h2 + p {
}

选择器可以从右到左读取。例如，a#selected > .icon 匹配所有具有 icon 类且是 id 为 selected 的 <a> 元素的直接子元素的元素。选择器 .box h2 + p 匹配紧随任何 id 为 box 的元素的后代中的任何 <h2> 元素之后的第一个 <p>。

一个 选择器列表 是一个用逗号分隔的简单选择器、复合选择器和/或复杂选择器列表。当元素与该选择器列表中的任何一个（至少一个）选择器匹配时，就说该元素与选择器列表匹配。

#main,
article.heading {
}

如果 非宽容选择器 列表中的任何选择器无效，则整个选择器列表将失效。

#main,
:bad-pseudoclass,
.validClass {
  /* `:bad-pseudoclass` is invalid, invalidating this style block */
}

可以使用 :is() 和 :where() 伪类来构造 宽容选择器列表。

相对选择器是一种选择器，它表示相对于一个或多个由组合器前缀的锚元素的元素。没有以显式组合器开头的相对选择器具有隐式后代组合器。

相对选择器不能在选择器列表中使用。相反，它在某些上下文中被接受，例如:has()伪类。

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

• CSS 选择器和组合器
• 宽容选择器列表
• Document.querySelector()
• Document.querySelectorAll()
• CSS 选择器 模块
• CSS 伪元素 模块