CSS中的伪类与伪元素：让样式更加灵活优雅

心灵星图

于 2025-03-19 20:43:36 发布

阅读量385

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/2501_91107759/article/details/146380125

版权

CSS中的伪类与伪元素：让样式更加灵活优雅

在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。

一、伪类（Pseudo-classes）

1.1 什么是伪类？

伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。

1.2 常用伪类

/* 鼠标悬停状态 */
button:hover {
    background-color: #0056b3;
}

/* 输入框获得焦点时 */
input:focus {
    border-color: #007bff;
}

/* 未访问的链接 */
a:link {
    color: #0066cc;
}

/* 已访问的链接 */
a:visited {
    color: #551A8B;
}

1.3 结构性伪类

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

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

/* 奇数项 */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

/* 偶数项 */
tr:nth-child(even) {
    background-color: #ffffff;
}

二、伪元素（Pseudo-elements）

2.1 什么是伪元素？

伪元素用于创建不存在于DOM树中的元素，以双冒号（::）开头。它们让我们能够添加额外的标记，而无需修改HTML。

2.2 常用伪元素

/* 在元素内容之前添加内容 */
.quote::before {
    content: "「";
    color: #666;
}

/* 在元素内容之后添加内容 */
.quote::after {
    content: "」";
    color: #666;
}

/* 选择第一行文本 */
p::first-line {
    font-size: 120%;
    font-weight: bold;
}

/* 选择第一个字母 */
p::first-letter {
    font-size: 200%;
    float: left;
    margin-right: 5px;
}

三、实战应用案例

3.1 清除浮动

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

3.2 创建装饰性图标

.external-link::after {
    content: "↗";
    margin-left: 5px;
    font-size: 12px;
}

3.3 创建工具提示

.tooltip {
    position: relative;
}

.tooltip::before {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background: #333;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    display: none;
}

.tooltip:hover::before {
    display: block;
}

<span class="tooltip" data-tip="这是提示文本">悬停查看提示</span>

3.4 自定义列表样式

.custom-list li {
    list-style: none;
    padding-left: 20px;
}

.custom-list li::before {
    content: "✓";
    color: #28a745;
    margin-right: 8px;
}