CSS selectors

示例 说明 CSS IE
Elemental selectors
* 任意类型的元素，即所有的元素。 2 6
E 元素的类型为 E，比如 div。 1 6
Attribute selectors
E.warning 元素 E 的 class list 包含 warning。 1 6
E#myid 元素 E 的 id 为 myid。 1 6
E[foo] 元素 E 有 foo attribute。 2 7
E[foo="bar"] 元素 E 的 foo attribute 的值为 bar。 2 7
E[foo="bar" i] 同上，不过值不区分大小写。其它 attribute selectors 也可以使用。 4 No
E[foo~="bar"] 元素 E 的 foo attribute 的值为以空格分隔的列表，其中之一为 bar。 2 7
E[foo|="en"] 元素 E 的 foo attribute 的值为 en 或以 en- 开始。 2 7
E[foo^="bar"] 元素 E 的 foo attribute 的值以 bar 开头。 3 7
E[foo$="bar"] 元素 E 的 foo attribute 的值以 bar 结尾。 3 7
E[foo*="bar"] 元素 E 的 foo attribute 的值包含 bar。 3 7
Combinators
E F or E >> F 元素 F 是元素 E 的后代。后一种写法目前没有浏览器实现。 2 6
E > F 元素 F 为元素 E 的子元素。 2 7
E + F 元素 F 紧跟在兄弟元素 E 的后面。 2 7
E ~ F 元素 F 在兄弟元素 E 的后面。 2 6
Tree-Structural pseudo-classes
E:root 元素 E 为文档根元素，HTML 文档即 <html>。 3 9
E:empty 元素 E 没有子节点，只考虑元素和文本节点，注释等节点不考虑。 3 9
E:blank 元素 E 为空只有空白。 4 No
Child-indexed Pseudo-classes
E:first-child 元素 E 是其父元素的第一个子元素。 2 7
E:last-child 元素 E 是其父元素的最后一个子元素。 3 8
E:only-child 元素 E 是其父元素的唯一的子元素。 3 9
E:nth-child(n [of S]?) 元素 E 是其父元素（匹配 S）的第 n 个子元素。 3 9
E:nth-last-child(n [of S]?) 元素 E 是其父元素（匹配 S）的倒数第 n 个子元素。 3 9
Typed Child-indexed Pseudo-classes
E:first-of-type 元素 E 是与它同类型的兄弟元素中第一个。 3 9
E:last-of-type 元素 E 是与它同类型的兄弟元素中最后一个。 3 9
E:only-of-type 元素 E 在它的兄弟元素中类型唯一。 3 9
E:nth-of-type(n) 元素 E 是与它同类型的兄弟元素中第 n 个。 3 9
E:nth-last-of-type(n) 元素 E 是与它同类型的兄弟元素中倒数第 n 个。 3 9
Linguistic Pseudo-classes
E:dir(ltr) 元素 E 文字方向从左到右。 4 6
E:lang(zh, "*-hant") 元素 E 文字为中文或中文方言。 4 6
Location Pseudo-classes
E:any-link 元素 E 为锚点或链接。 4 No
E:link 元素 E 为链接且未访问。 1 6
E:visited 元素 E 为链接且已访问。 1 6
E:target 元素 E 为文档 URL hash 所指的目标。 3 9
E:scope 元素 E 为参考点。 4 No
User Action Pseudo-classes
E:hover 鼠标在元素 E 上。 2 6
E:active 元素 E 处于激活状态。 1 6
E:focus 元素 E 获得焦点。 2 8
E:focus-ring 元素 E 获得焦点，并且 UA 显示 focus 指示。 2 No
E:drop 元素 E 能接受拖放。 4 No
E:drop(active) 元素 E 是当前拖放的 drop target 。 4 No
E:drop(valid) 元素 E 能接受当前拖放。 4 No
E:drop(invalid) 元素 E 不能接受当前拖放，不过可接受其它的。 4 No
The Input Pseudo-classes
E:enabled
E:disabled		 控件 E 是否可用。 3 9
E:read-write
E:read-only		 控件 E 是否可写。 4 No
E:placeholder-shown 输入框 E 显示着占位符。 4 No
E:default 控件 E 是一组选项中默认选中的一项。 4 No
E:checked 控件 E 被选中。 4 9
E:indeterminate 控件 E 处于中间状态。 4 9*
E:valid
E:invalid		 控件 E 验证是否通过。 4 10
E:in-range
E:out-of-range		 控件 E 的值是否在值域中。 4 No
E:required
E:optional		 控件 E 是否必选。 4 10
E:user-error 控件 E 验证无效且弹出提示。 4 No
Logical Combinations
E:matches(s1, s2) 元素 E 匹配 compound selector s1 或 s2。 4 No
E:not(s1, s2) 元素 E 不匹配 compound selector s1 和 s2。 4 9*
E:has(rs1, rs2) 以元素 E 为参考点，相对选择符 rs1 或 rs2 有匹配。 4 No
Time-dimensional Pseudo-classes
E:current 元素 E 在当前的画布上。 4 No
E:current(s) E:current 元素集合当中匹配选择符 s 的元素。 4 No
E:past 元素 E 在过去的画布上。 4 No
E:future 元素 E 在将来的画布上。 4 No
Grid-Structural Selectors
F || E 元素 E 与 元素 F 同列。 4 No
E:nth-column(n) 元素 E 在第 n 列内。 4 No
E:nth-last-column(n) 元素 E 在倒数第 n 列内。 4 No