Selectors 概览

下表来自 Selectors Specification

Pattern Represents Section Level
* 任意元素 §5.2 Universal selector 2 MDN
E E 元素，它的 type 为 E §5.1 Type (tag name) selector 1 MDN
E:not(s1, s2) E 元素，它既不匹配 s1，也不匹配 s2。 s1 和 s2 为 compound selector §4.3 The Negation Pseudo-class: :not() 3/4 MDN
E:matches(s1, s2) E 元素，它匹配 s1 或匹配 s2。s1 和 s2 为 compound selector §4.2 The Matches-any Pseudo-class: :matches() 4 MDN
E:has(rs1, rs2) an E element, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope elements, match an element §4.4 The Relational Pseudo-class: :has() 4 MDN
E.warning E 元素，它的 class 包含 warning §6.6 Class selectors 1 MDN
E#myid E 元素，它的 id 为 myid §6.7 ID selectors 1 MDN
E[foo] E 元素，它有 foo attribute §6 Attribute selectors 2 MDN
E[foo="bar"] E 元素，它的 foo attribute 的值为 bar §6 Attribute selectors 2 MDN
E[foo="bar" i] E 元素，它的 foo attribute 的值为不区分大小写 (ASCII-range) 的 bar。 §6.3 Case-sensitivity 4 MDN
E[foo~="bar"] E 元素，它的 foo attribute 的值为以空格分隔的列表，其中之一为 bar §6 Attribute selectors 2 MDN
E[foo^="bar"] E 元素，它的 foo attribute 的值以 bar 开始 §6.2 Substring matching attribute selectors 3 MDN
E[foo$="bar"] E 元素，它的 foo attribute 的值以 bar 结束 §6.2 Substring matching attribute selectors 3 MDN
E[foo*="bar"] E 元素，它的 foo attribute 的值包含子串 bar §6.2 Substring matching attribute selectors 3 MDN
E[foo|="en"] E 元素，它的 foo attribute 的值为 en 或者以 en-开始 §6 Attribute selectors 2 MDN
E:dir(ltr) E 元素，它的文字书写方向为 left-to-right §7.1 The Directionality Pseudo-class: :dir() 4 MDN
E:lang(zh, "*-hant") an element of type E tagged as being either in Chinese (any dialect or writing system) or otherwise written with traditional Chinese characters §7.2 The Language Pseudo-class: :lang() 2/4 MDN
E:any-link E 元素，它是an E element being the source anchor of a hyperlink §8.1 The Hyperlink Pseudo-class: :any-link 4 MDN
E:link an E element being the source anchor of a hyperlink of which the target is not yet visited §8.2 The Link History Pseudo-classes: :link and :visited 1 MDN
E:visited an E element being the source anchor of a hyperlink of which the target is already visited §8.2 The Link History Pseudo-classes: :link and :visited 1 MDN
E:target E 元素，它是element being the target of the referring URL §8.3 The Target Pseudo-class: :target 3 MDN
E:scope an E element being a designated reference element §8.4 The Reference Element Pseudo-class: :scope 4 MDN
E:current an E element that is currently presented in a time-dimensional canvas §10 Time-dimensional Pseudo-classes 4 MDN
E:current(s) an E element that is the deepest :current element that matches selector s §10 Time-dimensional Pseudo-classes 4 MDN
E:past an E element that is in the past in a time-dimensional canvas §10 Time-dimensional Pseudo-classes 4 MDN
E:future an E element that is in the future in a time-dimensional canvas §10 Time-dimensional Pseudo-classes 4 MDN
E:active E 元素，它处于激活状态 §9 User Action Pseudo-classes 1 MDN
E:hover E 元素，它或它的后代在鼠标指针下 §9 User Action Pseudo-classes 2 MDN
E:focus E 元素，它有用户输入焦点 §9 User Action Pseudo-classes 2 MDN
E:focus-ring an E element that has user input focus, and the UA has determined that a focus ring or other indicator should be drawn for that element §9 User Action Pseudo-classes 4 MDN
E:drop an E element that can possibly receive a drop §9.6 The Drag-and-Drop Pseudo-class: :drop and :drop() 4 MDN
E:drop(active) an E element that is the current drop target for the item being dragged §9.6 The Drag-and-Drop Pseudo-class: :drop and :drop() 4 MDN
E:drop(valid) an E element that could receive the item currently being dragged §9.6 The Drag-and-Drop Pseudo-class: :drop and :drop() 4 MDN
E:drop(invalid) an E element that cannot receive the item currently being dragged, but could receive some other item §9.6 The Drag-and-Drop Pseudo-class: :drop and :drop() 4 MDN
E:enabled
E:disabled		 UI 元素 E，它被启用或禁用 §12.1.1 The :enabled and :disabled Pseudo-classes 3 MDN
E:read-write
E:read-only		 a user interface element E that is user alterable, or not §12.1.2 The Mutability Pseudo-classes: :read-only and :read-write 3-UI/4 MDN
E:placeholder-shown 输入控件 E，它正显示它的 placeholder text §12.1.2 The Mutability Pseudo-classes: :read-only and :read-write 3-UI/4 MDN
E:default UI 元素 E，它是选项当中的默认项 §12.1.4 The Default-option Pseudo-class: :default 3-UI/4 MDN
E:checked UI 元素 E，它 checked/selected (如 radio-button or checkbox) §12.2.1 The Selected-option Pseudo-class: :checked 3 MDN
E:indeterminate a user interface element E that is in an indeterminate state (neither checked nor unchecked) §12.2.2 The Indeterminate-value Pseudo-class: :indeterminate 4 MDN
E:valid
E:invalid		 a user-input element E that meets, or doesn’t, its data validity semantics §12.3.2 The Range Pseudo-classes: :in-range and :out-of-range 3-UI/4 MDN
E:in-range
E:out-of-range		 a user-input element E whose value is in-range/out-of-range §12.3.2 The Range Pseudo-classes: :in-range and :out-of-range 3-UI/4 MDN
E:required
E:optional		 a user-input element E that requires/does not require input §12.3.3 The Optionality Pseudo-classes: :required and :optional 3-UI/4 MDN
E:user-error a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required) §12.3.4 The User-interaction Pseudo-class: :user-invalid 4 MDN
E:root E 元素，它是文档的 root §13 Tree-Structural pseudo-classes 3 MDN
E:empty E 元素，它没有 children (包括 text nodes) §13 Tree-Structural pseudo-classes 3 MDN
E:blank E 元素，它没有内容（空白除外） §13 Tree-Structural pseudo-classes 4 MDN
E:nth-child(n [of S]?) E 元素， the n-th child of its parent matching S §13.4 Child-indexed Pseudo-classes 3 MDN
E:nth-last-child(n [of S]?) an E element, the n-th child of its parent matching S, counting from the last one §13.4 Child-indexed Pseudo-classes 3 MDN
E:first-child E 元素，它是它的 parent 的第一个 child §13.4 Child-indexed Pseudo-classes 2 MDN
E:last-child E 元素，它是它的 parent 的最后一个 child §13.4 Child-indexed Pseudo-classes 3 MDN
E:only-child E 元素，它是它的 parent 的唯一 child §13.4 Child-indexed Pseudo-classes 3 MDN
E:nth-of-type(n) an E element, the n-th sibling of its type §13.5 Typed Child-indexed Pseudo-classes 3 MDN
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one §13.5 Typed Child-indexed Pseudo-classes 3 MDN
E:first-of-type an E element, first sibling of its type §13.5 Typed Child-indexed Pseudo-classes 3 MDN
E:last-of-type E 元素, 它的 type 在 siblings 中唯一 §13.5 Typed Child-indexed Pseudo-classes 3 MDN
E:only-of-type E 元素, 它的 type 在 siblings 中唯一 §13.5 Typed Child-indexed Pseudo-classes 3 MDN
E F or E >> F F 元素，它是 E 元素的后代 §14.1 Descendant combinator ( ) or (>>) 1 or 4 MDN
E > F F 元素，它是 E 元素的子代 §14.2 Child combinator (>) 2 MDN
E + F F 元素，它贴身跟在 E 元素的后面 §14.3 Next-sibling combinator (+) 2 MDN
E ~ F F 元素，它在 E 元素的后面 §14.4 Subsequent-sibling combinator (~) 3 MDN
F || E an E element that represents a cell in a grid/table belonging to a column represented by an element F §15 Grid-Structural Selectors 4 MDN
E:nth-column(n) an E element that represents a cell belonging to the nth column in a grid/table §15 Grid-Structural Selectors 4 MDN
E:nth-last-column(n) an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one §15 Grid-Structural Selectors 4 MDN

Universal selector

*，匹配任意 type 元素

获取所有元素

document.getElementsByTagName('*')
document.querySelectorAll('*')

Attribute selectors

E[foo="bar" i], i 表示 ignore case，值不区分大小写

E[foo="bar" i]
E[foo|="bar" i]

:dir

:nth-child()

:nth-child(An+B [of S]?)

表格斑马条纹

tr {
  background: white;
}

tr:nth-child(even) {
  background: silver;
}

li:nth-child(3)            /* 第三个 li */
li:nth-child(-n + 3)       /* 头三个 li */
li:nth-last-child(-n + 3)  /* 后三个 li */

:checked

表示 checked checkboxes, checked radio buttons, selected option

:empty

表示 element 为空。只考虑 element 和 text 节点，不考虑 comment 等节点。