9.1 用伪类增强交互性
CSS中的伪类和伪元素是改进网页设计和用户体验(UX)的强大工具。利用它们可以创建互动和动态的元素、改进视觉感受并提高可访问性。
我们来看几个例子，了解如何使用伪类和伪元素来达到这些目的。
1. 光标悬停
伪类 :hover 允许在用户将光标悬停在元素上时更改其样式。这对按钮和链接特别有用。
例子：改变按钮悬停时的颜色
在这个例子中，按钮的背景色在光标悬停时发生变化，这提升了视觉反馈并使界面更具互动性：
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>点击我</button>
2. 元素聚焦
伪类 :focus 用于在表单元素获得焦点时对其进行样式修饰。这帮助用户看到他们当前正在填写哪个表单元素。
例子：聚焦时输入字段的样式化
在这个例子中，输入字段在被聚焦时获得蓝色边框和阴影，提升了活动表单元素的可见性：
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. 活动元素状态
伪类 :active 在元素被激活时应用（例如，当鼠标按钮被按下时）。
例子：按钮按下时的样式化
在这个例子中，按钮在按下时略微缩小并改变颜色，创造出按键效果：
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>点击我</button>
9.2 用伪元素增强视觉效果
4. 添加内容：::before 和 ::after
伪元素 ::before 和 ::after 允许在元素前后添加内容，而无需更改HTML代码。
例子：在链接前添加图标
在这个例子中，图标被添加到链接文本前，提升了视觉效果并提示用户这是一个链接：
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">这里</a>
例子：在段落后添加装饰元素
在这个例子中，装饰元素被添加到段落后，提升了页面的视觉设计：
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>内容</p>
5. 第一字母和行的样式化：::first-letter 和 ::first-line
伪元素 ::first-letter 和 ::first-line 允许对文本的首字母和首行进行样式化，创造排版效果。
例子：段落首字母的样式化
在这个例子中，段落的首字母被放大并染成蓝色，创造出"嵌入"首字母的效果，这在杂志设计中常见：
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>内容</p>
例子：段落首行的样式化
在这个例子中，段落的首行被加粗并染成绿色，增强了文本的可读性：
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>内容</p>
9.3 用伪类和伪元素改善可访问性
6. 表单元素的状态
表单伪类允许根据其状态对元素进行样式修饰，提升可访问性和用户界面。
例子：已选中复选框的样式化
在这个例子中，已选中复选框被染成绿色，增强了视觉反馈：
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
例子：禁用输入字段的样式化
在这个例子中，禁用的输入字段获得浅灰色的背景和文本，视觉上表明其不可用：
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
例子：不正确输入字段的样式化
在这个例子中，不正确的输入字段被赋予红色边框，帮助用户识别输入错误：
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 完整实现示例
/* 添加图标到链接前 */
a::before {
content: "🔗";
margin-right: 5px;
}
/* 鼠标悬停时段落首字母的样式化 */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* 按钮样式 */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* 聚焦时输入字段样式 */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* 已选中复选框的样式 */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* 禁用输入字段样式 */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* 不正确输入字段样式 */
input:invalid {
border-color: #e74c3c;
}
<!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>
<a href="#">带图标的链接</a>
<p>将鼠标悬停在此段落上，以查看首字母的效果。</p>
<button>按钮</button>
<form>
<label>
输入文本:
<input type="text" required>
</label>
<br>
<label>
输入邮箱:
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> 复选框
</label>
<br>
<button type="submit">提交</button>
<button type="button" disabled>禁用按钮</button>
</form>
</body>
</html>
伪类和伪元素提供了强大的工具来提升网页设计和用户体验。它们的使用可以创建互动和动态元素，改善视觉感受，提高可访问性，使界面对用户更友好和愉快。
理解并正确应用这些工具，能够打开许多创建现代和有效网页设计的可能性。
GO TO FULL VERSION