伪类与伪元素

伪类是CSS中用于选择元素特定状态的关键词，而伪元素则允许开发者对元素的特定部分进行样式化。两者在CSS3中扮演着重要角色，但它们的用途和语法存在明显差异。理解这些差异有助于更精准地控制页面样式。

伪类的定义与常见类型

伪类以冒号（:）开头，用于定义元素的特殊状态。它们不会改变DOM结构，而是基于用户交互或文档状态动态应用样式。常见的伪类可分为以下几类：

用户交互伪类

这些伪类响应用户操作，例如悬停或点击：

/* 链接未访问时的样式 */
a:link {
  color: blue;
}

/* 链接已访问状态 */
a:visited {
  color: purple;
}

/* 鼠标悬停时 */
button:hover {
  background-color: #f0f0f0;
}

/* 元素获得焦点时 */
input:focus {
  border-color: #4CAF50;
}

/* 活动状态（鼠标按下未释放） */
a:active {
  color: red;
}

结构伪类

基于元素在DOM树中的位置进行选择：

/* 选择第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 选择最后一个子元素 */
div:last-child {
  border-bottom: none;
}

/* 选择第n个子元素 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 选择特定类型的第一个元素 */
p:first-of-type {
  text-indent: 2em;
}

表单相关伪类

专门针对表单元素的状态：

/* 被选中的单选或复选框 */
input:checked {
  outline: 2px solid green;
}

/* 禁用的表单元素 */
input:disabled {
  opacity: 0.5;
}

/* 有效的输入内容 */
input:valid {
  border-color: green;
}

/* 必填字段 */
input:required {
  border-left: 3px solid red;
}

伪元素的定义与使用场景

伪元素使用双冒号（::）语法（CSS3规范推荐，但单冒号仍被支持），它们创建了不存在于DOM中的虚拟元素。主要伪元素包括：

::before 和 ::after

这两个伪元素常用来插入装饰性内容：

/* 在段落前添加引号图标 */
p::before {
  content: "“";
  font-size: 2em;
  color: #999;
}

/* 在链接后添加外部链接图标 */
a[href^="http"]::after {
  content: " ↗";
}

/* 创建工具提示效果 */
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

::first-letter 和 ::first-line

专门针对文本的首字母或首行：

/* 首字母下沉效果 */
article::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
}

/* 段落首行特殊样式 */
p::first-line {
  font-variant: small-caps;
  color: #666;
}

::selection

自定义文本选中样式：

/* 改变选中文本的背景和颜色 */
::selection {
  background: #ffb7b7;
  color: #000;
}

/* 兼容不同浏览器 */
::-moz-selection {
  background: #ffb7b7;
  color: #000;
}

伪类与伪元素的组合使用

两者可以结合使用实现更复杂的效果：

/* 鼠标悬停时显示自定义提示 */
.tooltip:hover::after {
  content: attr(data-tip);
  display: block;
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
}

/* 列表项第一个元素的第一个字母 */
li:first-child::first-letter {
  font-size: 150%;
  color: #8A2BE2;
}

/* 表格隔行变色并添加标记 */
tr:nth-child(even)::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

实际应用案例

创建自定义复选框

<input type="checkbox" id="custom-check" hidden>
<label for="custom-check" class="checkbox-label"></label>

.checkbox-label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  position: relative;
  cursor: pointer;
}

#custom-check:checked + .checkbox-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid green;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

制作面包屑导航

<nav class="breadcrumb">
  <a href="#">首页</a>
  <a href="#">分类</a>
  <a href="#">当前页面</a>
</nav>

.breadcrumb a {
  text-decoration: none;
  color: #666;
}

.breadcrumb a:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: #999;
}

.breadcrumb a:last-child {
  color: #333;
  font-weight: bold;
}

性能考量与最佳实践

虽然伪类和伪元素非常有用，但需注意以下事项：

1. 复杂的选择器可能影响渲染性能，特别是在移动设备上
2. ::before和::after的content属性必须设置，即使是空字符串
3. 伪元素默认是行内元素，可以通过display属性修改
4. 某些伪类如:hover在触摸设备上表现不同
5. 伪元素无法绑定JavaScript事件

/* 不推荐的复杂选择器 */
div:nth-child(3n+1):hover > p::first-line {
  color: red;
}

/* 更高效的选择器写法 */
.highlight-line::first-line {
  color: red;
}

浏览器兼容性解决方案

针对旧版浏览器的兼容处理：

/* 同时使用单冒号和双冒号确保兼容性 */
.clearfix:after,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* IE8及以下不支持nth-child */
/* 使用JavaScript或给特定元素添加类名替代 */
li.first-item {
  color: red;
}

创意应用示例

渐变下划线效果

a.fancy-underline {
  position: relative;
  text-decoration: none;
}

a.fancy-underline:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

自定义列表标记

ul.custom-markers {
  list-style: none;
  padding-left: 0;
}

ul.custom-markers li::before {
  content: "▹";
  color: #FF6B6B;
  margin-right: 8px;
}

ul.custom-markers li:nth-child(3n)::before {
  content: "◆";
  color: #4ECDC4;
}

伪元素创建复杂形状

利用伪元素可以避免额外的HTML元素：

.tooltip-box {
  position: relative;
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
}

.tooltip-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: #f8f8f8 transparent;
}

动态内容生成技巧

伪元素的content属性可以结合CSS变量和属性值：

<div data-count="5" class="counter"></div>

.counter::before {
  content: "数量: " attr(data-count);
  color: #333;
  font-weight: bold;
}

/* 使用CSS计数器自动编号 */
ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counter(section) ". ";
  color: #666;
}