在CSS样式开发中，伪类和伪元素是两个非常实用的特性，能够帮助我们实现很多原生HTML无法支持的样式效果和交互逻辑，不需要额外添加多余的DOM节点就能完成样式优化。两者虽然名称相似，但核心用途和语法规则存在明显区别，掌握正确的使用方法能让样式开发更高效。
伪类和伪元素的核心区别
伪类主要用于选择处于特定状态的元素，比如鼠标悬停、元素被点击、表单输入框获得焦点等，本质上是给已有的元素添加一个临时的状态类，不会创建新的DOM节点。伪元素则是用来创建不在DOM树中的虚拟元素，比如给元素添加前置内容、后置内容，或者选中元素的某一部分文本，会生成一个新的虚拟节点。
从语法上也能快速区分两者：CSS3规范之后，伪类使用单冒号:selector的语法，伪元素使用双冒号::selector的语法，不过部分旧的伪元素写法也支持单冒号，为了规范建议伪元素统一使用双冒号。
常见伪类的使用方法
动态伪类
动态伪类是最常用的伪类类型，主要和元素的交互状态相关，常见的有以下几种：
:hover：鼠标悬停在元素上时触发:active：元素被激活（比如鼠标按下未松开）时触发:focus：表单元素获得焦点时触发:visited：链接被访问过后触发:link：链接未被访问时触发
下面是一个按钮交互的伪类使用示例：
/* 按钮基础样式 */
.btn {
padding: 8px 16px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
/* 鼠标悬停时修改背景色 */
.btn:hover {
background-color: #40a9ff;
}
/* 按钮被点击时修改背景色 */
.btn:active {
background-color: #096dd9;
}
/* 按钮获得焦点时添加外边框 */
.btn:focus {
outline: 2px solid #91d5ff;
}
结构伪类
结构伪类用于根据元素在DOM树中的位置选择元素，常见的有以下几种：
:first-child：选择父元素下的第一个子元素:last-child：选择父元素下的最后一个子元素:nth-child(n)：选择父元素下第n个子元素，n可以是数字、关键词（odd/even）或者公式:not(selector)：选择不符合指定选择器的元素
下面是一个列表样式优化的示例，给奇数行和最后一行添加不同的背景色：
/* 列表容器样式 */
.list {
list-style: none;
padding: 0;
margin: 0;
}
/* 列表项基础样式 */
.list li {
padding: 12px 16px;
border-bottom: 1px solid #eee;
}
/* 奇数行列表项背景色 */
.list li:nth-child(odd) {
background-color: #fafafa;
}
/* 最后一个列表项去掉底部边框 */
.list li:last-child {
border-bottom: none;
}
/* 排除带有disabled类的列表项 */
.list li:not(.disabled) {
cursor: pointer;
}
常见伪元素的使用方法
内容伪元素
::before和::after是最常用的伪元素，用于在选中元素的前面或后面插入虚拟的内容，需要通过content属性定义插入的内容，内容可以是文本、图片或者空值。
下面是一个给提示文本前面添加图标，后面添加说明的示例：
/* 提示文本容器样式 */
.tip {
position: relative;
padding-left: 24px;
color: #666;
font-size: 14px;
}
/* 在前面添加提示图标 */
.tip::before {
content: "!";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
background-color: #faad14;
color: #fff;
border-radius: 50%;
font-size: 12px;
}
/* 在后面添加补充说明 */
.tip::after {
content: "（仅供参考）";
color: #999;
font-size: 12px;
margin-left: 4px;
}
文本选择伪元素
::selection伪元素用于修改用户选中页面文本时的样式，比如选中文本的背景色和文字颜色，提升页面的个性化体验。
使用示例：
/* 修改页面文本选中样式 */
::selection {
background-color: #bae7ff;
color: #0050b3;
}
/* 给特定区域的选中样式做单独调整 */
.article-content::selection {
background-color: #f9f0ff;
color: #531dab;
}
使用注意事项
- 伪元素的
content属性是必填项，如果不需要插入内容可以设置为空字符串content: ""，否则伪元素不会生效。 - 伪类选择器的优先级和普通的类选择器一致，伪元素的优先级和标签选择器一致，编写样式时需要注意优先级覆盖的问题。
- 不是所有的HTML元素都支持所有的伪类和伪元素，比如
:visited伪类只对<a>链接元素生效，使用时需要确认元素的兼容性。 - 避免滥用伪元素和伪类，如果需要通过JavaScript频繁操作插入的内容，建议使用真实的DOM节点，伪元素生成的内容无法通过DOM API直接获取和修改。
掌握伪类和伪元素的正确使用方法，能够在不增加页面DOM节点数量的前提下，实现更丰富的样式效果和交互逻辑，让CSS代码更简洁高效，也能减少不必要的页面渲染开销。