CSS 简明教程 - CSS 伪类 - 简单教程，简单编程

CSS 伪类主要用于向选择器添加特殊状态，我们可以使用 CSS 伪类 ( 而不是使用 JavaScript ) 为 HTML 元素实现一些简单的效果，例如悬停动画

语法规则

伪类的语法规则很简单，使用形式一般如下

selector:pseudo-class {
    property: value;
}

注意：伪类是区分大小写的

伪类也可以添加到 class 属性上，这时候 selector 是可选的，例如

[selector].class:pseudo-class {
    property: value;
}

锚点伪类

在 CSS 链接章节中，我们了解到 <a> 元素有四种状态：未访问 ( :link )，已访问 ( :visited )，悬停 ( :hover ) 和活动 ( active)

这四种状态的样式由 CSS 伪类定义，例如

/* 未访问时样式 */
a:link {
    color: #FF0000;
}

/* 已访问时样式 */
a:visited {
    color: #00FF00;
}

/* 鼠标经过时样式 */
a:hover {
    color: #FF00FF;
}

/* 选择链接时样式 */
a:active {
    color: #0000FF;
}

注意：当你为链接的不同状态设置样式时，请遵循以下规则：a:link 和 a:visited 必须在 a:hover 之前，并且 a:active 只能放在最后，也就是 a:hover 之后

如果要在页面中定义几组不同的链接效果，可以同时使用 CS S类和 CSS 伪类

例如，我们可以定义一组链接，其初始颜色为红色，访问之后变为蓝色，同时，我们定义另一组链接，其初始颜色为绿色，并在访问后变为黄色

a.red:link {
    color: #FF0000;
}
a.red:visited {
    color: #0000FF;
}
a.blue:link {
    color: #00FF00;
}
a.blue:visited {
    color: #FF00FF;
}

HTML 代码如下

<a class="red" href="#">这是第一组链接样式</a>
<a class="blue" href="#">这是第二组链接样式</a>

:first-child 伪类

:first-child 伪类表示父元素的第一个子元素

例如下面的范例设置第一个 <li> 的颜色为黄色

li:first-child {
    color: orange;
}

HTML 代码如下

<ul>
    <li>该文本将是黄色</li>
    <li>该文本将会使用默认的颜色</li>
    <li>该文本将会使用默认的颜色</li>
</ul>

例如下面的示例设置每个 <li> 下的第一个 <span> 元素的的文本颜色为黄色且使用斜体

<style>
li > span:first-child {
    color: orange;
    font-style: italic;
}
</style>

<ul>
    <li>该 <span>文本</span> 将会是黄色</li>
    <li><span>该</span> 文本 <span>将</span> 使用默认颜色</li>
    <li>该 <span>文本</span> 将使用默认颜色</li>
</ul>

例如下面的示例设置第一个 <li> 中的所有 <span> 的文本设置为黄色且倾斜

<style>
li:first-child span {
    color: orange;
    font-style: italic;
}
</style.
<ul>
    <li>该 <span>文本</span> 将会 <span>是黄色</span>.</li>
    <li>该文本 <span>将</span> 使用默认颜色</li>
    <li>该 <span>文本</span> 将使用默认颜色</li>
</ul>

注意：在 IE8 及以下浏览器中必须设置 <!DOCTYPE> 才能使用 :first-child 伪类

`:first-of-type` 伪类

:first-of-type 伪类表示父容器中所有类型元素的第一个元素

例如下面的示例中，第一个 <li> 元素和第一个 <span> 元素的文本颜色将为橙色

<style>
ul:first-of-type {
    color: orange;
}
</style>

<ul>
    <li>这段文本将会是黄色</li>
    <li>这段 <span>文本</span> 将<span>是默认颜色</span></li>
    <li>这<span>段文本将会是</span> 默认颜色</li>
</ul>

`:lang` 伪类

:lang 伪类允许为不同的语言定义特殊规则

例如下面的示例中，:lang 使用 lang="no" 定义 <q> 元素的引号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>一些文本 <q lang="no">段落文本中的引号</q> 文本</p>
</body>
</html>

`:nth-child` 伪类

:nth-child 伪类是 CSS 中最灵活的伪类之一，所有 :nth 伪类都有一个参数可以包含三种类型

一个整型
公式 a + b ( a 和 b 都是整数 )
odd 或 even 关键字

例如下面的希腊单词列表

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

示例 1 : 将第二个单词 Beta 的颜色设置为橙色

ol :nth-child(2) {
    color: orange;
}

示例 2 : 将第二个、第四个、第六个、第八个...的颜色设置为橙色

ol :nth-child(2n) {
    color: orange;
}

示例 3 : 将偶数字的颜色设置为橙色

ol :nth-child(even) {
    color: orange;
}

示例 4 : 从第六个子元素开始，设置第六个、第十二个、第十八个...的颜色为橙色

ol :nth-child(2n+6) {
    color: orange;
}

所有的伪类

有关更多 CSS 中的伪类，可以访问我们的 CSS 参考手册：选择器

CSS 简明教程 - CSS 伪类