CSS伪类和伪元素是CSS选择器的扩展能力，能够在不修改DOM结构的前提下，为元素添加特殊状态样式或者生成额外的虚拟元素，是前端样式开发中的重要工具。
伪类与伪元素的核心区别
伪类用于选择处于特定状态的元素，比如鼠标悬停、元素被选中、子元素的位置等，语法上以单冒号:hover开头。伪元素用于创建不在DOM树中的虚拟元素，比如元素的前面、后面插入内容，语法上以双冒号::before开头，不过部分旧版伪元素也支持单冒号写法，为了区分建议统一使用双冒号。
常用CSS伪类解析
状态类伪类
这类伪类用于匹配元素的不同交互状态，最常见的有以下几种：
:hover：鼠标悬停在元素上方时触发:active：元素被激活（比如鼠标按下未松开）时触发:focus：元素获得焦点时触发，常用于输入框、按钮等可交互元素:checked：单选框、复选框被选中时触发
下面是一个按钮交互状态的示例代码：
/* 按钮默认样式 */
.btn {
padding: 8px 16px;
background: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 鼠标悬停样式 */
.btn:hover {
background: #40a9ff;
}
/* 按下状态样式 */
.btn:active {
background: #096dd9;
}
/* 获得焦点样式，移除默认轮廓 */
.btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
结构类伪类
这类伪类用于根据元素在DOM树中的位置进行选择，不需要额外添加类名：
:first-child：选择父元素的第一个子元素:last-child：选择父元素的最后一个子元素:nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（odd/even）或者公式:not(selector)：选择不符合指定选择器的元素
下面是实现表格奇偶行不同背景色的示例：
/* 表格默认样式 */
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 12px;
border: 1px solid #e8e8e8;
}
/* 偶数行背景色 */
tr:nth-child(even) {
background: #fafafa;
}
/* 排除第一行的表头行 */
tr:not(:first-child):hover {
background: #e6f7ff;
}
常用CSS伪元素解析
内容插入类伪元素
这类伪元素可以在元素的前面或后面插入虚拟内容，最常见的是::before和::after：
::before：在元素内容的前面插入虚拟内容::after：在元素内容的后面插入虚拟内容
两个伪元素必须配合content属性使用，即使不需要插入内容也要设置content: ""，否则伪元素不会生效。下面是给所有外部链接添加图标标识的示例：
/* 选择href属性以http开头的a标签，即外部链接 */
a[href^="http"]::after {
content: " ↗";
font-size: 12px;
color: #999;
}
/* 给提示文本前面添加图标 */
.tip::before {
content: "⚠ ";
color: #faad14;
}
其他常用伪元素
::first-line：选择元素的第一行文本，只能用于块级元素::first-letter：选择元素的第一个字符，常用于实现首字下沉效果::placeholder：选择输入框的占位符文本，用于修改占位符样式::selection：选择用户选中的文本，用于修改选中文本的样式
下面是修改输入框占位符样式和选中文本样式的示例：
/* 修改输入框占位符颜色 */
input::placeholder {
color: #bfbfbf;
font-size: 14px;
}
/* 修改用户选中文本的样式 */
::selection {
background: #1890ff;
color: white;
}
/* 首字下沉效果 */
.article p::first-letter {
font-size: 24px;
font-weight: bold;
float: left;
margin-right: 4px;
line-height: 1;
}
使用注意事项
在使用伪类和伪元素时，需要注意以下几点：
- 伪元素的
content属性是必填项，没有内容时也要设置为空字符串 - 伪元素默认是行内元素，如果需要设置宽高，需要手动修改为块级元素
- 伪类选择器的优先级和类选择器相同，伪元素的优先级和元素选择器相同
- 部分旧版本浏览器对双冒号伪元素语法支持不完善，如果需要兼容旧浏览器，可以使用单冒号写法
注意：不要混淆伪类和伪元素的语法，伪类用单冒号，伪元素用双冒号，这是区分两者的直观方式，也能避免样式生效异常的问题。