CSS Pseudo-classes(伪类 )

CSS伪类选择器根据其他条件匹配组件，而不一定由文档树定义。CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

什么是伪类

CSS伪类允许您设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类，例如，针对第一个或最后一个子元素。

伪类以冒号（:）开头。可以通过以下方式给出其语法：

以下部分描述了最常用的伪类。

锚伪类

使用锚伪类链接可以以不同的方式显示：

这些伪类使您可以对未访问的链接进行样式化，而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

一些锚点伪类是动态的-它们是由于用户与文档进行交互（例如悬停或聚焦等）而应用的。

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

这些伪类更改了响应用户操作呈现链接的方式。

• :hover 当用户将光标放在元素上但不选择它时应用。

• :active 当元素被激活或单击时适用。

• :focus 当元素具有键盘焦点时适用。

:first-child伪类

:first-child伪类匹配的是一些其他元素的第一个子元素的元素。ol li:first-child在下面的示例中，选择器选择一个有序列表的第一个列表项，并从其顶部删除边框。

ol li:first-child {
    border-top: none;
}

：last-seudo伪类

:last-child伪类匹配的是一些其他元素的最后一个子元素的元素。下ul li:last-child例中的选择器从无序列表中选择最后一个列表项，并从其中删除右边框。

ul li:last-child {
    border-right: none;
}

：nth-child伪类

CSS3引入了一个新的:nth-child伪类，使您可以将给定父元素的一个或多个特定子对象作为目标。此选择的基本语法可以与给予:nth-child(N)，其中N是一个参数，其可以是一个数字，一个关键字（even或odd），或形式的表达xn+y，其中x和y是整数（例如1n，2n，2n+1，...）。

table tr:nth-child(2n) td {
    background: #eee;
}

上面示例中的样式规则仅突出显示了代替表行，而没有向元素添加任何ID或类。

：lang伪类

语言伪类:lang允许根据特定标记的语言设置来构造选择器。:lang以下示例中的伪类为明确赋予语言值的元素定义了引号no。

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */Some text A quote in a paragraph Some text.

伪类和CSS类

伪类可以与CSS类结合使用。

class="red"在下面的示例中，带有的链接将显示为红色。

a.red:link {    /* style rule */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */