css伪类和伪类选择器 – CSS高级教程

上一章CSS高级教程请查看：css元素对齐属性

CSS伪类选择器根据附加条件(不一定由文档树定义)匹配组件。

什么是伪类？

CSS伪类允许你风格元素的动态状态如徘徊、活跃和集中状态,以及文档树中存在的元素,但不能有针对性的通过使用其他选择器在不添加任何id或类,例如,针对第一个或最后的子元素。

伪类以冒号(:)开头，其语法如下：

selector:pseudo-class { property: value; }

下面描述最常用的伪类。

锚伪类

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

这些伪类允许你将未访问的链接与已访问的链接区别开来。最常见的样式技术是从访问过的链接中删除下划线。

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

有些锚伪类是动态的——它们是作为用户与文档交互的结果而应用的，比如悬停、聚焦等。

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

这些伪类根据用户操作改变了链接的呈现方式。

• :hover当用户将光标放在元素上但不选择它时，将应用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;
}

注意：last-child选择器在Internet Explorer 8和更早的版本中不起作用，但支持在Internet Explorer 9和以上。

:nth-child伪类

CSS3引入了一个新的:nth-child伪类，它允许你针对给定父元素的一个或多个特定的子元素。这个选择器的基本语法可以是:nth-child(N)，其中N是一个参数，它可以是一个数字，一个关键字(偶数或奇数)，或者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>一些文本 <q lang="no">段落中的引语</q> 一些文本</p>

注意:Internet Explorer版本7之前不支持:lang伪类，只有<!DOCTYPE >IE8才支持。

伪类和CSS类

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

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

a.red:link {    /* 样式 */
    color: #ff0000;
}
<a class="red" href="#">点击</a>    /* HTML片段代码 */