8.1 基本概念
组合CSS中的伪类和伪元素，可以根据元素的状态、结构和内容创建强大灵活的选择器。这为创建复杂动态样式开辟了许多可能性，从而改善用户界面和网页交互体验。
组合基础
伪类
伪类用一个冒号（:）表示，根据状态或位置应用于元素。例如：
:hover— 当光标悬停在元素上时应用:first-child— 选择父元素的第一个子元素
伪元素
伪元素用两个冒号（::）表示，用于样式化元素的部分或添加内容。例如：
::before— 在元素前添加内容::first-letter— 样式化元素的第一个字母
组合
可以组合伪类和伪元素来创建复杂的选择器，允许根据元素的状态和结构应用样式。
语法：
选择器:伪类::伪元素 {
属性: 值;
}
8.2 组合用于交互性
示例 1: 悬停时样式化首字母
在这个例子中，段落的首字母在光标悬停时会放大并变为红色：
CSS
/* 悬停时样式化段落的首字母 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<p>Hover over this paragraph to see the first letter change.</p>
示例 2: 聚焦时在链接前添加内容
在这个例子中，当链接获得焦点时，会在链接前添加一个图标，并把它变为蓝色：
CSS
/* 聚焦时在链接前添加图标 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 组合用于样式化结构
示例 3: 样式化 div 内的第一个段落并添加内容
在这个例子中，div 中第一个段落的第一行被加粗并变为绿色：
CSS
/* 样式化 div 内的第一个段落的第一行 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
示例 4: 在列表的最后一个元素后添加装饰元素
在这个例子中，装饰元素在列表的最后一个元素后添加，并变为红色：
CSS
/* 在列表的最后一个元素后添加装饰元素 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 组合用于复杂条件
示例 5: 悬停时样式化偶数列表项
在这个例子中，偶数列表项在光标悬停时会获得浅灰色背景和蓝色文本：
CSS
/* 悬停时样式化偶数列表项 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
示例 6: 样式化已访问的活跃链接
在这个例子中，已访问并处于活跃状态的链接会变为橙色并带下划线：
CSS
/* 样式化已访问的活跃链接 */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 完整实现示例
CSS
/* 样式化 div 内的第一个段落的第一行 */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* 在列表的最后一个元素后添加装饰元素 */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* 悬停时样式化偶数列表项 */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* 聚焦时在链接前添加图标 */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* 悬停时样式化段落的首字母 */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类和伪元素组合示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>这是 div 中的第一个段落。</p>
<p>这是 div 中的第二个段落。</p>
</div>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li>列表项 4</li>
</ul>
<a href="#">聚焦时带图标的链接</a>
<p>悬停在此段落上以查看首字母效果。</p>
</body>
</html>
GO TO FULL VERSION