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匹配紧跟在任何类为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 伪元素模块