CSS 选择器
CSS 选择器规定了 CSS 规则会被应用到哪些元素上。
备注:暂时没有能够选择 父元素、父元素的同级元素,或 父元素的同级元素的子元素 的选择器或者组合器。
基本选择器
- 通用选择器(Universal selector)
- 选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。
语法:*
ns|*
*|*
例子:*
将匹配文档的所有元素。 - 元素选择器(Type selector)
- 按照给定的节点名称,选择所有匹配的元素。
语法:elementname
例子:input
匹配任何<input>
元素。 - 类选择器(Class selector)
- 按照给定的
class
属性的值,选择所有匹配的元素。
语法:.classname
例子:.index
匹配任何class
属性中含有 “index” 类的元素。 - ID 选择器(ID selector)
- 按照
id
属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
语法:#idname
例子:#toc
匹配 ID 为 “toc” 的元素。 - 属性选择器(Attribute selector)
- 按照给定的属性,选择所有匹配的元素。
语法:[attr]
[attr=value]
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
例子:[autoplay]
选择所有具有autoplay
属性的元素(不论这个属性的值是什么)。
分组选择器(Grouping selectors)
- 选择器列表(Selector list)
,
是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
语法:A, B
示例:div, span
会同时匹配<span>
元素和<div>
元素。
组合器(Combinators)
- 后代组合器(Descendant combinator)
语法:A B
例子:div span
匹配所有位于任意<div>
元素之内的<span>
元素。- 直接子代组合器(Child combinator)
>
组合器选择前一个元素的直接子代的节点。
语法:A > B
例子:ul > li
匹配直接嵌套在<ul>
元素内的所有<li>
元素。- 一般兄弟组合器(General sibling combinator)
~
组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
语法:A ~ B
例子:p ~ span
匹配同一父元素下,<p>
元素后的所有<span>
元素。- 紧邻兄弟组合器(Adjacent sibling combinator)
+
组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
语法:A + B
例子:h2 + p
会匹配所有紧邻在 <h2> (en-US) 元素后的<p>
元素。- 列组合器(Column combinator)
||
组合器选择属于某个表格行的节点。
语法:A || B
例子:col || td
会匹配所有<col>
作用域内的<td>
元素。
伪选择器(Pseudo)
规范
规范 | 状态 | 备注 |
---|---|---|
Selectors Level 4 | Working Draft | 增加 || 列组合器,网格结构选择器(grid structural selectors),逻辑选择器(logical combinators), location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection. |
Selectors Level 3 | Recommendation | 新增 ~ 一般兄弟选择器和 伪类。规定伪元素选择器使用 :: 前缀。增加 属性 选择器。 |
CSS Level 2 (Revision 1) | Recommendation | 新增 > 子元素选择器和 + 相邻兄弟选择器。新增 通用 选择器和 属性 选择器。 |
CSS Level 1 | Recommendation | 最初定义版本. |
参见
THE END