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
    








暂无评论内容