10.1 伪类
HTML和CSS中的伪类和伪元素可以让你根据元素的状态或内容来设计元素， 不需要额外添加类或修改HTML文档结构。它们提供了很棒的工具来创建互动且美观的网站。
伪类是根据元素的状态或在文档结构中的位置应用到元素上的。它们帮助你在不同的情况下设计元素，比如鼠标悬停、获取焦点或选中元素。 伪类以冒号(:)开头。
一些简单的伪类：
伪类:hover应用于用户把鼠标悬停在元素上时。
HTML
<button type="button">按钮</button>
CSS
button:hover {
color: red;
}
伪类:focus应用于元素获得焦点时，比如点击输入框。
HTML
<input type="text">
CSS
input:focus {
outline-color: blue;
}
伪类:active应用于元素激活时，比如点击链接或按钮。
HTML
<button type="button">按钮</button>
CSS
button:active {
background-color: green;
}
伪类:visited应用于用户已经访问过的链接。
HTML
<a href="#">链接</a>
CSS
a:visited {
color: purple;
}
10.2 伪元素
伪元素允许你设计不是独立HTML元素的元素部分。它们以两个冒号(::)开头。伪元素用于在元素前或后创建和设计内容， 突出显示元素的第一行或首字母等任务。
一些简单的伪元素：
伪元素::before在元素的内容之前插入内容。
HTML
<p>我叫斯捷潘。</p>
CSS
p::before {
content: "你好! ";
color: blue;
}
伪元素::after在元素内容后插入内容。
HTML
<p>注意！</p>
CSS
p::after {
content: " 谢谢你的关注!";
color: red;
}
伪元素::first-line应用于元素的第一行。它只允许设计文本的第一行。
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
CSS
p::first-line {
font-weight: bold;
color: green;
}
伪元素::selection应用于用户选择的文本。
HTML
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
CSS
::selection {
background-color: blue;
color: yellow;
}
试着在结果中选择文本。
10.3 伪元素的使用例子
HTML和CSS中的伪类和伪元素提供了很棒的机会来根据元素的状态或内容来设计元素。它们允许你创建更具互动性和视觉吸引力的网站，而不改变HTML结构。
例子1: 在链接文本前插入图标
HTML
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">这是一个带图标的链接</a>
</body>
</html>
例子2: 在段落后添加设计的块
HTML
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>这是一段文本。</p>
</body>
</html>
组合
可以组合伪类和伪元素来创建复杂且强大的样式。
例子: 在鼠标悬停时，在链接内选择的文本样式
HTML
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">选择这段文本，然后将鼠标悬停在上面。</a>
</body>
</html>
GO TO FULL VERSION