css中伪类与伪元素如何使用

在css样式编写过程中，伪类和伪元素是两类特殊的语法，它们不需要额外添加html标签就能实现特殊的样式效果，是前端开发中优化页面表现的重要工具。两者的语法和作用有明显区别，需要分开掌握。

伪类与伪元素的核心区别

伪类用于选择处于特定状态的现有元素，语法上以单冒号:hover作为标识，作用是匹配元素的某种状态或者位置特征。伪元素用于创建不在dom树中的虚拟元素，语法上以双冒号::before作为标识，用来给元素添加额外的样式内容。

常见伪类的使用场景

状态类伪类

状态类伪类主要用于匹配元素的交互状态，最常见的包括:hover、:active、:focus等，下面以链接的交互状态为例展示用法：

/* 未访问的链接样式 */
a:link {
    color: #333;
    text-decoration: none;
}

/* 鼠标悬停时的链接样式 */
a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* 链接被点击时的样式 */
a:active {
    color: #cc3300;
}

/* 链接获得焦点时的样式 */
a:focus {
    outline: 2px solid #ff6600;
}

结构类伪类

结构类伪类用于根据元素在dom树中的位置选择元素，不需要额外添加类名，常见的有:first-child、:nth-child()、:last-child等，下面以列表项样式为例：

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

/* 选择列表的偶数项 */
li:nth-child(even) {
    background-color: #f5f5f5;
}

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

常见伪元素的使用场景

伪元素最典型的作用是给元素前后添加额外内容或者修饰样式，常用的有::before、::after、::first-line等，下面以给提示文本前添加图标为例：

/* 给提示元素前添加图标 */
.tip::before {
    content: "!";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-color: #ff6600;
    color: #fff;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 12px;
}

/* 给段落首行设置特殊样式 */
p::first-line {
    font-weight: bold;
    color: #333;
}

使用注意事项

• 伪元素必须设置content属性才会生效，即使内容为空也要写content: ""
• 伪类的优先级高于普通类选择器，伪元素的优先级和类选择器相当
• 旧版本浏览器可能不支持双冒号的伪元素语法，如果需要兼容旧浏览器可以使用单冒号写法，但建议优先使用标准双冒号语法

掌握伪类和伪元素的用法后，可以减少不必要的html标签添加，让样式代码更简洁，同时实现更丰富的页面交互和视觉效果。

css_pseudo_classcss_pseudo_elementfront_end_styleweb_development修改时间：2026-06-18 23:51:13