CSS 选择器
摘要
选择器代表一种结构。这种结构可以用作条件（例如，在 CSS 规则中），以确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的 HTML 或 XML 片段的平面描述。
选择器范围可以从简单的元素名称到丰富的上下文表示。
CSS 选择器参考
类型选择器
通用选择器
属性选择器
- [attributename][attributename]
- [attributename="val"][attributename="val"]
- [attributename~="val"][attributename~="val"]
- [attributename|="val"][attributename|="val"]
- [attributename^="val"][attributename^="val"]
- [attributename$="val"][attributename$="val"]
- [attributename*="val"][attributename*="val"]
类选择器
ID 选择器
伪类
动态伪类
目标伪类
语言伪类
UI 元素状态伪类
结构伪类
:root:nth-child:nth-last-child:nth-of-type:nth-last-of-type:first-child:last-child:first-of-type:last-of-type:only-child:only-of-type:empty
否定伪类
伪元素
组合器
后代组合器
子组合器
相邻兄弟组合器
通用兄弟组合器
大小写敏感性
所有选择器语法在 ASCII 范围内（即 [a-z] 和 [A-Z] 等效）不区分大小写，但选择器不受控制的部分除外。选择器中文档语言元素名称、属性名称和属性值的区分大小写取决于文档语言。例如，在 HTML 中，元素名称不区分大小写，但在 XML 中，它们区分大小写。命名空间前缀的大小写敏感性在 CSS3NAMESPACE 中定义。
选择器语法
选择器是简单选择器的一个或多个序列，由组合器分隔。伪元素可以附加到选择器中最后一个简单选择器序列的末尾。简单选择器的序列是未由组合器分隔的简单选择器的链。它始终以类型选择器或通用选择器开头。序列中不允许其他类型选择器或通用选择器。
简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。
组合器是：空格、“大于号” (U+003E, >)、“加号” (U+002B, +) 和 “波浪线” (U+007E, ~)。空格可以出现在组合器及其周围的简单选择器之间。只有字符“空格” (U+0020)、“制表符” (U+0009)、“换行符” (U+000A)、“回车符” (U+000D) 和 “换页符” (U+000C) 可以出现在空格中。其他类似空格的字符，例如“em-space” (U+2003) 和 “表意文字空格” (U+3000)，绝不属于空格。
文档树中由选择器表示的元素是选择器的主体。由单个简单选择器序列组成的选择器表示满足其要求的任何元素。将另一个简单选择器序列和组合器前置到序列会施加额外的匹配约束，因此选择器的主体始终是最后一个简单选择器序列所表示的元素的子集。
空选择器，不包含任何简单选择器序列和伪元素，是一个无效的选择器。选择器中的字符可以使用与 CSS 相同的转义规则进行转义。CSS21。
某些选择器支持命名空间前缀。使用命名空间前缀的机制应由使用选择器的语言指定。如果该语言未指定命名空间前缀声明机制，则不声明任何前缀。在 CSS 中，命名空间前缀使用 @namespace 规则声明。CSS3NAMESPACE
选择器组
逗号分隔的选择器列表表示列表中每个单独选择器选择的所有元素的并集。（逗号是 U+002C。）例如，在 CSS 中，当多个选择器共享相同的声明时，可以将它们组合成逗号分隔的列表。逗号之前和/或之后可以出现空格。
在本例中，我们将具有相同声明的三个规则合并为一个。
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
等效于
h1, h2, h3 { font-family: sans-serif }
警告：在本例中等效性成立，因为所有选择器都是有效选择器。如果这些选择器中只有一个无效，则整个选择器组将无效。这将使所有三个标题元素的规则失效，而在后一种情况下，只有三个单独标题规则中的一个会失效。
无效 CSS 示例
h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }
不等效于
h1, h2..foo, h3 { font-family: sans-serif }
因为上面的选择器 (h1, h2…foo, h3) 整个无效，并且整个样式规则都会被丢弃。（当选择器未分组时，只有 h2…foo 的规则会被丢弃。）
参见
Related topics
选择器列表
| [css/selectors/-ms-scrollbar-shadow-color](/css/selectors/-ms-scrollbar-shadow-color) | [css/selectors/ID](/css/selectors/ID) | [css/selectors/Namespaced](/css/selectors/Namespaced) |
| [css/selectors/Type](/css/selectors/Type) | [css/selectors/Universal](/css/selectors/Universal) | [css/selectors/attribute selector](/css/selectors/attribute_selector) |
| [css/selectors/attributes/equality](/css/selectors/attributes/equality) | [css/selectors/attributes/existence](/css/selectors/attributes/existence) | [css/selectors/attributes/hyphen](/css/selectors/attributes/hyphen) |
| [css/selectors/attributes/prefix](/css/selectors/attributes/prefix) | [css/selectors/attributes/substring](/css/selectors/attributes/substring) | [css/selectors/attributes/suffix](/css/selectors/attributes/suffix) |
| [css/selectors/attributes/whitespace](/css/selectors/attributes/whitespace) | [css/selectors/border-image](/css/selectors/border-image) | [css/selectors/class](/css/selectors/class) |
| [css/selectors/class selector](/css/selectors/class_selector) | [css/selectors/combinators/adjacent sibling](/css/selectors/combinators/adjacent_sibling) | [css/selectors/combinators/child](/css/selectors/combinators/child) |
| [css/selectors/combinators/descendant](/css/selectors/combinators/descendant) | [css/selectors/combinators/general sibling](/css/selectors/combinators/general_sibling) | [css/selectors/cursor](/css/selectors/cursor) |
| [css/selectors/id selector](/css/selectors/id_selector) | [css/selectors/outline](/css/selectors/outline) | [css/selectors/outline-color](/css/selectors/outline-color) |
| [css/selectors/outline-style](/css/selectors/outline-style) | [css/selectors/outline-width](/css/selectors/outline-width) | [css/selectors/pseudo-classes](/css/selectors/pseudo-classes) |
| [css/selectors/pseudo-classes/:-ms-input-placeholder](/css/selectors/pseudo-classes/:-ms-input-placeholder) | [css/selectors/pseudo-classes/:active](/css/selectors/pseudo-classes/:active) | [css/selectors/pseudo-classes/:checked](/css/selectors/pseudo-classes/:checked) |
| [css/selectors/pseudo-classes/:disabled](/css/selectors/pseudo-classes/:disabled) | [css/selectors/pseudo-classes/:empty](/css/selectors/pseudo-classes/:empty) | [css/selectors/pseudo-classes/:enabled](/css/selectors/pseudo-classes/:enabled) |
| [css/selectors/pseudo-classes/:first-child](/css/selectors/pseudo-classes/:first-child) | [css/selectors/pseudo-classes/:first-of-type](/css/selectors/pseudo-classes/:first-of-type) | [css/selectors/pseudo-classes/:focus](/css/selectors/pseudo-classes/:focus) |
| [css/selectors/pseudo-classes/:hover](/css/selectors/pseudo-classes/:hover) | [css/selectors/pseudo-classes/:in-range](/css/selectors/pseudo-classes/:in-range) | [css/selectors/pseudo-classes/:indeterminate](/css/selectors/pseudo-classes/:indeterminate) |
| [css/selectors/pseudo-classes/:invalid](/css/selectors/pseudo-classes/:invalid) | [css/selectors/pseudo-classes/:lang(c)](/css/selectors/pseudo-classes/:lang(c)) | [css/selectors/pseudo-classes/:last-child](/css/selectors/pseudo-classes/:last-child) |
| [css/selectors/pseudo-classes/:last-of-type](/css/selectors/pseudo-classes/:last-of-type) | [css/selectors/pseudo-classes/:link](/css/selectors/pseudo-classes/:link) | [css/selectors/pseudo-classes/:not](/css/selectors/pseudo-classes/:not) |
| [css/selectors/pseudo-classes/:nth-child(n)](/css/selectors/pseudo-classes/:nth-child(n)) | [css/selectors/pseudo-classes/:nth-last-child(n)](/css/selectors/pseudo-classes/:nth-last-child(n)) | [css/selectors/pseudo-classes/:nth-last-of-type(n)](/css/selectors/pseudo-classes/:nth-last-of-type(n)) |
| [css/selectors/pseudo-classes/:nth-of-type(n)](/css/selectors/pseudo-classes/:nth-of-type(n)) | [css/selectors/pseudo-classes/:only-child](/css/selectors/pseudo-classes/:only-child) | [css/selectors/pseudo-classes/:only-of-type](/css/selectors/pseudo-classes/:only-of-type) |
| [css/selectors/pseudo-classes/:optional](/css/selectors/pseudo-classes/:optional) | [css/selectors/pseudo-classes/:required](/css/selectors/pseudo-classes/:required) | [css/selectors/pseudo-classes/:root](/css/selectors/pseudo-classes/:root) |
| [css/selectors/pseudo-classes/:target](/css/selectors/pseudo-classes/:target) | [css/selectors/pseudo-classes/:valid](/css/selectors/pseudo-classes/:valid) | [css/selectors/pseudo-classes/:visited](/css/selectors/pseudo-classes/:visited) |
| [css/selectors/pseudo-classes/Dynamic pseudo-classes](/css/selectors/pseudo-classes/Dynamic_pseudo-classes) | [css/selectors/pseudo-classes/Structural pseudo-classes](/css/selectors/pseudo-classes/Structural_pseudo-classes) | [css/selectors/pseudo-classes/ui element states pseudo-classes](/css/selectors/pseudo-classes/ui_element_states_pseudo-classes) |
| [css/selectors/pseudo-elements](/css/selectors/pseudo-elements) | [css/selectors/pseudo-elements/::after](/css/selectors/pseudo-elements/::after) | [css/selectors/pseudo-elements/::before](/css/selectors/pseudo-elements/::before) |
| [css/selectors/pseudo-elements/::first-letter](/css/selectors/pseudo-elements/::first-letter) | [css/selectors/pseudo-elements/::first-line](/css/selectors/pseudo-elements/::first-line) | [css/selectors/pseudo-elements/::region](/css/selectors/pseudo-elements/::region) |
| [css/selectors/pseudo-elements/::selection](/css/selectors/pseudo-elements/::selection) | [css/selectors/type](/css/selectors/type) | [css/selectors/universal selector](/css/selectors/universal_selector) |
| [css/selectors/user-select](/css/selectors/user-select) | [css/selectors/zoom](/css/selectors/zoom) |
- 选择器 Level 3
- 推荐