CSS 伪类

CSS 伪类选择器基于附加条件匹配元素，并且不一定由文档树定义。

什么是伪类

CSS 伪类允许你设置元素的动态状态，例如悬停，活动和焦点状态，以及文档树中存在的元素，但不能通过使用其他选择器来定位而不添加任何元素它们的 ID 或类，例如，定位第一个或最后一个子元素。

伪类以冒号（:） 开头。其语法如下：

selector:pseudo-class { property : value ; } 

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

锚伪类

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

这些伪类使你可以将未访问的链接设置为与访问过的链接不同。最常见的样式技术是从访问过的链接中删除下划线。

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 允许基于特定标签的语言设置构建选择器。

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

注意： 版本 7 以下的 Internet Explorer 不支持 :lang 伪类。仅当指定了 <!DOCTYPE> 时，IE8 才支持。

伪类和 CSS 类

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

以下示例中的 class="red" 链接将以红色显示。

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