当前位置：首页 > news >正文

CSS 伪类与伪元素：深度解析

news 2025/9/4 11:02:11

在前端开发中，CSS 伪类和伪元素是两个强大的工具，它们能让你在不改动 HTML 结构的情况下，为元素添加复杂的样式和动态效果。它们就像 CSS 的“超能力”，让你的网页更具交互性和表现力。本文将带你深入了解它们的概念和用法，并通过代码案例让你彻底掌握。

一、伪类 (Pseudo-classes)

伪类是附加在选择器上的关键字，用于选择处于特定状态或位置的元素。它们的语法是一个冒号 (: )。

这些伪类根据用户的交互行为来改变元素样式，是提升用户体验的关键。

:active: 选中元素被激活时的状态，通常是鼠标点击或按住时。
- 案例: 鼠标点击按钮时，让按钮背景变暗。
```
button:active {background-color: darkgray;transform: translateY(1px);
}
```
:hover: 选中鼠标悬停在元素上时的状态。
- 案例: 鼠标移入链接时，改变链接颜色。
```
a:hover {color: crimson;
}
```
:focus: 选中元素获得焦点时的状态，常用于表单输入框。
- 案例: 用户点击输入框时，添加高亮边框。
```
input:focus {outline: 2px solid deepskyblue;
}
```
:focus-within: 选中当元素本身或其任何后代元素获得焦点时的状态。
- 案例: 当表单内的任意输入框被选中时，整个表单添加边框。
```
form:focus-within {border: 2px solid lightgreen;
}
```

这些伪类专门用于根据表单元素的不同状态来添加样式，帮助用户进行输入校验。

:enabled: 选中当前可用的表单元素。
:disabled: 选中当前禁用的表单元素。
- 案例: 让被禁用的输入框呈现灰色，并改变光标样式。
```
input:disabled {background-color: lightgray;cursor: not-allowed;
}
```
:checked: 选中已被勾选的复选框或单选按钮。
- 案例: 选中复选框后，改变其背景颜色。
```
input[type="checkbox"]:checked {background-color: blue;
}
```
:valid & :invalid: 选中输入内容有效或无效的表单元素。
- 案例: 根据输入是否为有效邮箱，改变边框颜色。
```
input[type="email"]:valid {border-color: green;
}
input[type="email"]:invalid {border-color: red;
}
```
:required & :optional: 选中带有 required 属性或不带该属性的输入元素。
- 案例: 为必填项添加一个特殊的背景色。
```
input:required {background-color: #fff9e6;
}
```
:autofill: 选中被浏览器自动填充的输入框。
:in-range & :out-of-range: 选中值在指定范围之内或之外的输入元素。

这些伪类根据链接的访问历史或 URL 片段来定位和样式化元素。

:any-link: 选中所有带有 href 属性的链接，无论是否被访问过。
:link: 选中所有未被访问过的链接。
:visited: 选中用户已经访问过的链接。
- 案例: 为访问过的链接设置不同的颜色，帮助用户区分。
```
a:visited {color: #8a2be2; /* 紫色 */
}
```

:target: 选中 URL 锚点所指向的元素。

<a href="#intro">跳到引言</a>
<div id="intro">...</div>

/* CSS */
#intro:target {background-color: lightyellow;
}

这些伪类根据元素在 HTML 文档树中的位置来选择它们，是构建灵活布局的利器。

:root: 选中文档的根元素，通常是 <html>。
:empty: 选中不包含任何子元素（包括文本和空格）的元素。
- 案例: 隐藏空的警告信息容器。
```
.alert-box:empty {display: none;
}
```
:nth-child(n) & :nth-last-child(n): 根据位置选择元素。
:first-child & :last-child: 选中父元素下的第一个或最后一个子元素。
:only-child: 选中父元素下唯一的子元素。
- 案例: 为唯一的列表项添加特殊样式。
```
li:only-child {font-weight: bold;
}
```
:first-of-type & :last-of-type: 选中父元素下同类型元素的第一个或最后一个。
- 案例: 选中每个 section 中的第一个段落。
```
section p:first-of-type {text-indent: 2rem;
}
```
:nth-of-type(n) & :only-of-type: 根据同类型元素的位置进行选择。

这些伪类接受参数，允许你进行更复杂的条件选择。

:is() & :where(): 这两个伪类都接受一个选择器列表，并选中匹配其中任意一个的元素。:where() 的特异性为零，非常适合用于样式重置。
- 案例: 简化复杂选择器。
```
/* 传统写法 */
section h1, article h1, aside h1 {font-size: 2rem;
}
/* 使用 :is() */
:is(section, article, aside) h1 {font-size: 2rem;
}
```
:has(): 俗称“父选择器”，选中包含特定子元素的父元素。
- 案例: 只有当卡片包含图片时，才为其添加阴影。
```
.card:has(img) {box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
```
:not(): 选中不匹配给定选择器的所有元素。
- 案例: 为除了 .primary 类之外的所有按钮设置灰色背景。
```
button:not(.primary) {background-color: gray;
}
```

伪元素是虚拟的、不存在于 HTML 中的元素，用于对元素中的特定部分进行样式设置，或在其前后插入内容。它们的语法是两个冒号 (::)。

::before & ::after: 在元素内容的前面或后面插入内容。它们必须和 content 属性一起使用。
- 案例: 在链接前添加一个图标。
```
a::before {content: "➡️";margin-right: 5px;
}
```
::first-letter: 选中元素文本内容的第一个字母。
- 案例: 为段落首字母创建“大写首字下沉”效果。
```
p::first-letter {font-size: 3rem;color: blue;
}
```
::marker: 选中列表项的标记（如项目符号或编号）。
- 案例: 改变列表标记的颜色。
```
li::marker {color: green;
}
```
::placeholder: 选中表单输入框的占位符文本。
::selection: 选中用户用鼠标高亮选择的文本。