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 属性的元素（不论这个属性的值是什么）。

选择器列表（Selector list）: , 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B
示例：div, span 会同时匹配 <span> 元素和 <div> 元素。

后代组合器（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> 元素后的 <p> 元素。
列组合器（Column combinator）: || 组合器选择属于某个表格行的节点。
语法： A || B
例子： col || td 会匹配所有 <col> 作用域内的 <td> 元素。

规范	状态	备注
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	最初定义版本.

伪类和伪元素的规范位于各自的页面中。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。