什么是伪类?
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
锚伪类
链接能够以不同的方式显示:
实例
/* 未访问的链接 */ a:link { color: red; } /* 已访问的链接 */ a:visited { color: yellow; } /* 鼠标悬停链接 */ a:hover { color: blue; } /* 已选择的链接 */ a:active { color: green; }
实例代码
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: yellow;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
</style>
</head>
<body>
<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。</p>
</body>
</html>
注意:a:hover
必须在 CSS 定义中的 a:link
和 a:visited
之后,才能生效!a:active
必须在 CSS 定义中的 a:hover
之后才能生效!伪类名称对大小写不敏感。
简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素(类似工具提示的效果):
实例
p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }
CSS - :first-child 伪类
:first-child
伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。
匹配首个 <p> 元素
在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 <p> 元素:
实例
p:first-child {
color: blue;
}
匹配所有 <p> 元素中的首个 <i> 元素
在下面的例子中,选择器匹配所有 <p> 元素中的第一个 <i> 元素:
实例
p i:first-child {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>
匹配所有首个 <p> 元素中的所有 <i> 元素
在下面的例子中,选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素:
实例
p:first-child i {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
</body>
</html>