伪类选择器

概念

CSS伪类是添加到选择器的关键字，指定要选择元素的指定状态。所谓的指定状态是指添加了伪类的元素，需要符合某种条件或某种状态下才能生效。例如：设置了:hover伪类的元素，只有当鼠标悬停在元素上面时，样式才会生效。

语法

selector:pseudo-class{property: value;}

selector：表示CSS选择器；

:pseude-class：表示伪类；

property：表示属性名；

value：表示属性值；

可以有多个property: value;。

伪类含义

01

选择器语法	伪类含义
E:nth-child(an+b)	匹配其父元素的第an+b个子元素。子元素第一个编号为1，n=0,1,2,…；an+b也可以是一个确定的数字。
E:nth-last-child(an+b)	与:nth-child一样，只是从结尾处开始反序计数，而不是从头计数。
E:first-child	表示其父元素中的第一个子元素，等同于E:nth-child(1)
E:last-child	代表其父元素的最后一个元素，等同于E:nth-last-child(1)
E:only-child	代表了其父元素下的唯一一个子元素，等同于:nth-child(1):nth-last-child(1)或:first-child:last-child。

上面伪类除了:root之外，都有相同之处“child”，都是匹配其父元素下符合某种规律或规则的子元素。

an+b，表示序号。a和b是一个整数（整数、负数和零），n可以是一个确定的数，也可以使用n本身，这时n的取值是1,2,3…。

例如，当取奇数序号时使用2n+1；当去偶数时使用2n。

02

选择器语法	伪类含义
E:nth-of-type(an+b)	选择器所表示的元素的兄弟元素中（包括自身）元素名相同的第an+b个元素。
E:nth-last-of-type(an+b)	与:nth-of-type一样，只是它从结尾处反序计数，而不是从开头处顺序计数。
E:first-of-type	匹配其父元素下使用同种标签的第一个子元素，等同于nth-of-type(1).
E:last-of-type	匹配字父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)。
E:only-of-type	匹配其父元素下使用同种标签的唯一一个子元素，等同于:nth-of-type(1):nth-last-of-type(1)或:first-of-type:last-of-type。

在这个表中的伪类，有同一个特点“of-type”。与01表中的伪类可匹配到父元素下所有的子节点不同，这里只能匹配到父元素下同种元素的子节点。

03

选择器语法	伪类含义
E:root	匹配文档的根元素，对于HTML文档，就是元素
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
E:not(s)	匹配不符合当前选择器的任何元素。其中s表示选择器（id，类，标签等选择器）
:target	当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。

01、02、03三个表中的伪类都是从文档结构上去进行匹配的。可以将他们分类为：结构类伪类选择器。

04

选择器语法	伪类含义
E:default	匹配一组相关元素中的默认表单元素。该选择器可以在<button>,<input type="checkbox">,<input type="radio">, 以及<option>上使用。
E:checked	匹配表单中被选中的radio、checkbox或select中的option元素
E:disable	匹配表单中被禁用的元素。
E:enabled	匹配表单中激活的元素。
E:in-range	匹配一个type=number的<input>，并且当前值处于属性min和max限定范围内
E:out-of-range	匹配一个type=number的<input>，并且当前值处于属性min和max限定范围之外
E:indetermination	匹配状态不确定的表单元素。
E:invalid	匹配内容未通过验证的表单元素。
E:valid	匹配内容验证正确地表单元素。
E:required	匹配任意拥有required属性的表单元素，它允许表单在提交之前容易的展示必填字段并且渲染其外观。
E:optional	匹配任意没有required属性的表单元素。
E:read-only	匹配不可被用户编辑的元素
E:read-write	匹配可以被用户编辑的元素。
E:scope	匹配作为选择符匹配元素的参考点。（这是一个实验中的功能）

这个表格中的伪类都是与表单相关的，可以将它们分类为表单/人机交互相关伪类。利用这些伪类，可以提高人机交互性能。

05

选择器语法	伪类含义
E:link	匹配元素当中未访问的链接。
E:visited	匹配元素当中以已访问的连接。出于隐私原因，可以使用此选择器修改的样式非常有限。
E:hover	匹配当鼠标悬停在元素上（没有激活它）的情况，多用于链接
E:active	匹配处于激活状态下的元素，多用于链接。
E:focus	匹配获得焦点的元素。
E:any-link	匹配有链接锚点的元素，不管它是否被访问过，也就是说，它会匹配每一个有href属性的元素。（尚在试验中）
E:defined	匹配任何已定义的元素。包括任何浏览器内置的标准元素以及已成功定义的自定义元素。

这个表格中的伪类都表示了某种状态下元素的样式，因此称之为：与状态相关的伪类选择器。

06

选择器语法	伪类含义
:dir(ltr/trl)	匹配特定文字书写方向的元素。(尚在实验中)
:lang()	基于元素语言来匹配页面元素。

07

选择器语法	伪类含义
:left	需要和@规则 @page配套使用, 对打印文档的左侧页设置CSS样式.
:first	需要和@规则 @page配套使用, 对打印文档的第一页设置CSS样式.

这个表格的伪类是与打印相关的。

08

选择器语法	伪类含义
:fullscreen	当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。(尚在实验中)

总结

来一波思维导图：