CSS3选择器概述

课后整理 2020-12-9

根据选择器结构的不同，可以把CSS选择器分为五大类：

其中，伪选择器包括伪类选择器（如表4所示）和伪对象选择器（如表5所示）。根据执行任务不同，伪类选择器又分为六种：

选择器模块权威参考：http://www.w3.org/TR/css3-selectors/。

表1 元素选择器列表

选择器 说明
* 通配选择器，选定所有对象。
E 类型选择器，匹配所有同类标签的元素。
.className 类选择器，匹配class属性值包含className的元素。注意，E.className表示限定元素类选择器。
#IDName ID选择器，匹配id属性值等于IDName的元素。注意，E#IDName示限定元素ID选择器。

表2 关系选择器列表

选择器 说明
E,F 分组选择器，同时匹配E和F两个子选择器匹配的对象，子选择器之间用逗号分隔。
E F 包含选择器，匹配所有被E元素包含的F元素。
E > F 子选择器，匹配E元素的所有子元素F。
E + F 相邻选择器，匹配紧贴在E元素之后F元素，元素E与F必须同属一个父级。
E ~ F 兄弟选择器，匹配E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。CSS3新增。

表3 属性选择器列表

选择器 说明
E[att] 匹配具有att属性的E元素。注意，E可以省略， 如[cheacked]，以下相同。
E[att="val"] 匹配具有att属性，且属性值等于val的E元素。
E[att~="val"] 匹配具有att属性，且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 注意，包含只有一个值且该值等于val的情况。
E[att|="val"] 匹配具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素。 注意，如果值仅为val，也将被选择。
E[att^="val"] 匹配具有att属性，且属性值为以val开头的字符串的E元素。CSS3新增。
E[att$="val"] 匹配具有att属性，且属性值为以val结尾的字符串的E元素。CSS3新增。
E[att*="val"] 匹配具有att属性，且属性值为包含val的字符串的E元素。CSS3新增。

提示，CSS支持并列使用多个属性选择器，以匹配同时满足多个选择器，如blockquote[class=quote][cite] { color:#f00; }。

表4 伪类选择器列表

选择器 说明
E:link 设置超链接a在未被访问前的样式。
E:visited 设置超链接a在其链接地址已被访问过时的样式。
E:hover 设置元素在其鼠标悬停时的样式。
E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus 设置对象在成为输入焦点时的样式。
E:lang(fr) 匹配使用特殊语言的E元素。
E:not(s) 匹配不含有s选择符的元素E。CSS3新增。
E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。CSS3新增。
E:first-child 匹配父元素的第一个子元素E。CSS3新增。
E:last-child 匹配父元素的最后一个子元素E。CSS3新增。
E:only-child 匹配父元素仅有的一个子元素E。CSS3新增。
E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。CSS3新增。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。CSS3新增。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。CSS3新增。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。CSS3新增。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。CSS3新增。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。CSS3新增。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。CSS3新增。
E:empty 匹配没有任何子元素（包括text节点）的元素E。CSS3新增。
E:checked 匹配用户界面处于选中状态的元素E。注意，用于input的type为radio与checkbox时。CSS3新增。
E:enabled 匹配用户界面上处于可用状态的元素E。CSS3新增。
E:disabled 匹配用户界面上处于禁用状态的元素E。CSS3新增。
E:target 匹配相关URL指向的E元素。CSS3新增。
@page :first 设置在打印时页面容器第一页使用的样式。注意，仅用于@page规则。
@page :left 设置页面容器位于装订线左边的所有页面使用的样式。注意，仅用于@page规则。
@page :right 设置页面容器位于装订线右边的所有页面使用的样式。注意，仅用于@page规则。

表5 伪对象选择器列表

选择器 说明
E:first-letter/E::first-letter 设置对象内的第一个字符的样式。注意，仅作用于块对象。CSS3完善。
E:first-line/E::first-line 设置对象内的第一行的样式。注意，仅作用于块对象。CSS3完善。
E:before/E::before 设置在对象前发生的内容。与content属性一起使用，且必须定义content属性。CSS3完善。
E:after/E::after 设置在对象后发生的内容。与content属性一起使用，且必须定义content属性。CSS3完善。
E::placeholder 设置对象文字占位符的样式。CSS3新增。
E::selection 设置对象被选择时的样式。CSS3新增。

伪选择器能够根据元素或对象的特征、状态、行为进行匹配。

伪选择器以冒号(：)作为前缀标识符。冒号前可以添加限定选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。

伪类是一种特殊的类选择器，它的用处就是可以对不同状态或行为下的元素定义样式，这些状态或行为是无法通过静态的选择器匹配的，具有动态特性。

CSS伪类选择器有两种用法方式：

E:pseudo-class { property:value}

其中E为元素，pseudo-class为伪类名称，property是CSS的属性，value为CSS的属性值。例如：

a:link {color:red;}
E.class:pseudo-class{property:value}

其中.class表示类选择符。把类选择符与伪类选择符组成一个混合式的选择器，能够设计更复杂的样式，以精准匹配元素。例如：

a.selected:hover {color: blue;}

【注意】

CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)，用以区别伪类选择符，但以前的写法仍然有效。