:root 伪类

匹配文档的根元素，用于解决根元素不是 html 的场景，例如根元素是 svg。

使用场景：重置样式、定义变量。

:empty 伪类

匹配空标签，标签内不能有注释或换行。

:first-child 伪类和 :last-child 伪类

:first-child 伪类匹配第一个元素，:last-child 伪类匹配最后一个元素。

:only-child 伪类

匹配没有兄弟元素的元素。

:nth-child() 伪类和 :nth-last-child() 伪类

匹配指定序号的元素。

参数类型：关键字形式（odd、even）和函数符号形式（An + B）。

:first-of-type 伪类和 :last-of-type 伪类

:first-of-type 表示当前第一个标签类型的元素，:last-of-type 的语法和匹配规则与此类似。

示例

• 第一个列表项
• 第二个列表项
• 第三个列表项

第一个列表项：:first-child

第三个列表项：:last-child

无兄弟元素的列表项：:only-child

:first-of-type 元素：h1

:last-of-type 元素：p

如何使用CSS的伪类

CSS的伪类用于向某些选择器添加特殊的效果，最常用的便是向超链接中添加样式，如颜色，字体大小，粗细等。使用标签选择器同样可以设置超链接的样式，但是加入了伪类可以让超链接在操作过程中展示不同的效果。

在伪类的使用过程中，锚伪类是应用最为广泛的，链接的不同状态都可以用伪类以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，鼠标悬停状态和激活状态。我们使用a : link { color: red }来设置未被访问的链接，如下图所示。

使用a:visited {color : pink;}设置已访问过的链接，当页面已经在浏览器打开并点击链接后，显示的便是访问过的效果，如下图所示。如果想要还原成未访问之前的状态，重新打开页面是不行的，需要清除浏览器的缓存才可。

使用a:hover {color : yellow;}设置鼠标悬停在链接上显示的效果，当鼠标显示为手型时，页面链接变为设置的效果，如下图所示。

使用a:active {color : green;}设置激活链接的效果，只有当鼠标点击的时候才起作用。设置a标签被激活时的样式（被点击时的样式），代码如下图所示。需要注意的是一定要按照顺序a:link，a:visited，a:hover，a:active来设置，否则不能达到预期的效果。

first-child 伪类，可以使用first-child伪类来选择元素的第一个子元素，如下图第一个元素分别为p元素的第一个元素和li元素的第一个元素。

:lang 伪类，可以为不同的语言定义特殊的规则。如下图所示，lang 类为属性值为 no 的q元素定义引号的类型：q:lang(no) { quotes: （ ） }。

:focus伪类，可以设置点击鼠标时的聚焦效果，如下图所示，当我们点击用户名文本框时出现黄色的背景色。

css伪类有哪些

选择器 示例 示例说明:checkedinput:checked选择所有选中的表单元素:disabledinput:disabled选择所有禁用的表单元素:emptyp:empty选择所有没有子元素的p元素:enabledinput:enabled选择所有启用的表单元素:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素:in-rangeinput:in-range选择元素指定范围内的值:invalidinput:invalid选择所有无效的元素:last-childp:last-child选择所有p元素的最后一个子元素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:not(selector):not(p)选择所有p以外的元素:nth-child(n)p:nth-child(2)选择所有 p 元素的父元素的第二个子元素:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:only-childp:only-child选择所有仅有一个子元素的p元素:optionalinput:optional选择没有required的元素属性:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性:read-onlyinput:read-only选择只读属性的元素属性:read-writeinput:read-write选择没有只读属性的元素属性:requiredinput:required选择有required属性指定的元素属性:rootroot选择文档的根元素:target#news:target选择当前活动#news元素(点击URL包含锚的名字):validinput:valid选择所有有效值的属性:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素输入后具有焦点:first-letterp:first-letter选择每个<p> 元素的第一个字母:first-linep:first-line选择每个<p> 元素的第一行:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <p> 元素:beforep:before在每个<p>元素之前插入内容:afterp:after在每个<p>元素之后插入内容:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值