CSS 伪类
CSS 伪类选择器根据附加条件匹配组件，而不必由文档树定义。
什么是伪类
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在元素具有键盘焦点时适用。
注意：要使这些伪类完美运行，您必须按照确切的顺序定义它们 — :link, :visited, :hover, :active, :focus.
:first-child 伪类
:first-child 伪类匹配一个元素，该元素是某个其他元素的第一个子元素。 下例中的选择器 ol li:first-child 选择有序列表的第一个列表项并移除它的顶部边框。
ol li:first-child {
border-top: none;
}注意：要使 :first-child 在 Internet Explorer 8 和更早版本中工作，必须在文档顶部声明 <!DOCTYPE>。
:last-child 伪类
:last-child 伪类匹配一个元素，该元素是某个其他元素的最后一个子元素。 下面示例中的选择器 ul li:last-child 从无序列表中选择最后一个列表项，并从中删除右边框。
ul li:last-child {
border-right: none;
}注意： CSS :last-child 选择器在 Internet Explorer 8 和更早版本中不起作用。 支持 Internet Explorer 9 及更高版本。
: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;
}上面示例中的样式规则只是突出显示备用表格行，而不向 <table> 元素添加任何 ID 或类。
提示： CSS :nth-child(N) 选择器在您必须选择以特定间隔或模式（例如偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。
:lang 伪类
语言伪类 :lang 允许根据特定标签的语言设置构造选择器。 下面示例中的 :lang 伪类定义了明确指定语言值为 no 的 <q> 元素的引号。
q:lang(no) {
quotes: "~" "~";
}
/* HTML 代码片段 */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>注意： 最高版本 7 的 Internet Explorer 不支持 :language 伪类。 IE8 仅在指定 <!DOCTYPE> 时才支持。
伪类和 CSS 类
伪类可以与 CSS 类结合使用。
在下面的示例中，带有 class="red" 的链接将显示为红色。
a.red:link { /* style rule */
color: #ff0000;
}
<a class="red" href="#">Click me</a> /* HTML 代码片段 */