CSS 伪类使用与实践：从入门到进阶

1. 什么是 CSS 伪类

伪类是 CSS 中用于定义元素特殊状态的选择器。它允许开发者在不修改 HTML 结构的前提下，根据元素的交互状态、位置关系或内容特征来应用样式。伪类以英文冒号（:）开头，紧跟在选择器之后，例如 :hover、:first-child 等。

伪类与伪元素容易混淆，二者的区别在于：伪类描述的是元素的某种状态，而伪元素则用于创建文档树中不存在的虚拟元素。伪元素使用双冒号（::）表示，如 ::before、::after。

2. 动态伪类：交互状态

动态伪类针对用户与页面的交互行为，是最常用的伪类类型。它们能够根据鼠标操作、焦点状态和链接访问情况动态改变元素样式。

2.1 链接伪类

链接伪类用于定义超链接在不同状态下的样式，包括未访问、已访问、悬停和激活四种状态。为了保证样式生效，这些伪类需要按照特定的顺序书写，即 LVHA 顺序（Link、Visited、Hover、Active）。

css 复制代码

a:link {
    color: #0066cc;
    text-decoration: none;
}

a:visited {
    color: #663399;
}

a:hover {
    color: #ff6600;
    text-decoration: underline;
}

a:active {
    color: #cc0000;
}

2.2 用户操作伪类

用户操作伪类包括 :hover、:active 和 :focus。其中 :hover 在鼠标悬停时触发，:active 在元素被激活（如鼠标按下）时触发，:focus 在元素获得焦点时触发，常用于表单输入框和可交互元素。

css 复制代码

.btn {
    background-color: #4a90d9;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #357abd;
}

.btn:active {
    background-color: #2a5f9e;
    transform: scale(0.98);
}

input:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 4px rgba(74, 144, 217, 0.5);
    outline: none;
}

3. 结构化伪类：位置与关系

结构化伪类根据元素在文档树中的位置关系来选择元素，无需依赖类名或 ID，能够显著减少 HTML 中的冗余标记。

3.1 子元素相关伪类

:first-child 选择父元素的第一个子元素，:last-child 选择最后一个子元素，:nth-child() 则可以根据序号选择任意位置的子元素。这些伪类在列表、表格和导航菜单中应用广泛。

css 复制代码

ul li:first-child {
    font-weight: bold;
}

ul li:last-child {
    border-bottom: none;
}

ul li:nth-child(odd) {
    background-color: #f5f5f5;
}

ul li:nth-child(3n) {
    color: #666;
}

3.2 类型相关伪类

类型伪类与子元素伪类类似，但只统计同类型元素。例如 :first-of-type 选择同类型元素中的第一个，:nth-of-type() 按类型序号选择元素。这在混合内容中非常实用，比如在包含图片和段落的容器中单独选择第一个段落。

css 复制代码

article p:first-of-type {
    font-size: 1.1em;
    color: #333;
}

article p:last-of-type {
    margin-bottom: 0;
}

div > p:nth-of-type(2) {
    text-indent: 2em;
}

3.3 其他结构化伪类

:not() 用于排除特定元素，:empty 选择没有子元素的空元素，:root 选择文档根元素（通常是 html）。这些伪类在组件化开发中经常用于条件样式控制。

css 复制代码

p:not(.highlight) {
    color: #555;
}

div:empty {
    display: none;
}

:root {
    --primary-color: #4a90d9;
    --spacing: 16px;
}

4. 表单伪类：输入状态

表单伪类针对输入控件的各种状态，包括启用、禁用、选中、必填和有效性等。合理使用这些伪类可以显著提升表单的可用性和用户体验。

css 复制代码

input:enabled {
    background-color: #fff;
}

input:disabled {
    background-color: #eee;
    color: #999;
    cursor: not-allowed;
}

input:checked + label {
    color: #4a90d9;
    font-weight: bold;
}

input:required {
    border-left: 3px solid #e74c3c;
}

input:valid {
    border-color: #2ecc71;
}

input:invalid {
    border-color: #e74c3c;
}

其中 :checked 常用于自定义复选框和单选按钮样式，:valid 和 :invalid 配合 HTML5 表单验证属性，可以实时反馈输入内容的正确性。

5. 伪类组合与进阶实践

伪类可以组合使用，实现更精细的选择逻辑。例如同时匹配悬停状态和特定类名，或者排除某些条件下的元素。组合使用时需要注意选择器的优先级和可读性。

css 复制代码

.nav-item:hover:not(.active) {
    background-color: #f0f0f0;
}

input:focus:valid {
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.5);
}

li:nth-child(2n+1):not(:first-child) {
    padding-left: 20px;
}

5.1 实战案例：自定义复选框

利用 :checked 伪类和相邻兄弟选择器，可以隐藏原生复选框并绘制自定义样式，同时保持表单功能完整。

css 复制代码

.custom-checkbox {
    display: none;
}

.custom-checkbox + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.custom-checkbox + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: #fff;
    transition: all 0.2s ease;
}

.custom-checkbox:checked + label::before {
    background-color: #4a90d9;
    border-color: #4a90d9;
}

.custom-checkbox:checked + label::after {
    content: "✓";
    position: absolute;
    left: 3px;
    top: -1px;
    color: #fff;
    font-size: 14px;
}

5.2 实战案例：表格斑马纹与悬停高亮

结合 :nth-child() 和 :hover 伪类，可以快速实现表格的斑马纹效果和行悬停高亮，提升数据可读性。

css 复制代码

table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

table tbody tr:hover {
    background-color: #e8f0fe;
}

table tbody tr td {
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
}

6. 浏览器兼容性与性能建议

现代浏览器对伪类的支持已经非常完善，但部分较新的伪类（如 :is()、:where()）在旧版本浏览器中可能不受支持。建议根据目标用户群体合理选择伪类，并为关键交互提供降级方案。

在性能方面，伪类选择器本身不会带来明显的性能负担，但应避免在大型文档中过度使用复杂的组合选择器。对于高频触发的状态（如 :hover），建议配合 transition 属性实现平滑过渡，避免频繁触发重绘。

7. 伪类与 JavaScript 的配合

CSS 伪类本身是纯样式层面的选择器，无法被 JavaScript 直接"调用"或"触发"，但开发者可以通过 JavaScript 间接控制伪类所对应的状态，从而让伪类样式生效或失效。核心思路是：伪类依赖的是元素的状态，而 JavaScript 可以改变这些状态。

7.1 通过 class 切换模拟伪类

最常见的做法是使用 JavaScript 动态添加或移除类名，配合 CSS 中定义的类选择器来模拟伪类效果。这种方式兼容性最好，也最容易理解和维护。

css 复制代码

.btn {
    background-color: #4a90d9;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn.active {
    background-color: #357abd;
    transform: scale(0.98);
}

javascript 复制代码

const btn = document.querySelector('.btn');

btn.addEventListener('mousedown', () => {
    btn.classList.add('active');
});

btn.addEventListener('mouseup', () => {
    btn.classList.remove('active');
});

7.2 直接操作状态属性

对于 :focus、:checked 等由元素自身状态决定的伪类，JavaScript 可以直接调用对应的方法或修改属性来触发。例如使用 focus() 方法让输入框获得焦点，或设置 checked 属性改变复选框的选中状态。

javascript 复制代码

// 让输入框获得焦点，触发 :focus 样式
const input = document.querySelector('input');
input.focus();

// 设置复选框选中状态，触发 :checked 样式
const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.checked = true;

// 禁用输入框，触发 :disabled 样式
input.disabled = true;

7.3 使用 CSS 自定义属性实现动态控制

对于 :hover 这类由用户交互触发的伪类，JavaScript 无法直接模拟，但可以通过 CSS 自定义属性（变量）结合 JavaScript 实现类似的效果。这种方式适合需要根据业务逻辑动态改变样式的场景。

css 复制代码

.card {
    --highlight-color: #f0f0f0;
    background-color: var(--highlight-color);
    transition: background-color 0.3s ease;
}

javascript 复制代码

const card = document.querySelector('.card');

// 根据业务逻辑动态改变样式
card.style.setProperty('--highlight-color', '#e8f0fe');

7.4 注意事项

在使用 JavaScript 控制伪类状态时，需要注意以下几点：一是 :hover 和 :active 这类由用户真实交互触发的伪类，无法通过 JavaScript 直接模拟，只能通过添加类名等方式间接实现；二是频繁操作 DOM 可能会带来性能开销，建议在需要时再修改状态；三是使用 classList 操作类名时，要注意与原有类名共存，避免覆盖其他样式。

7. 总结

CSS 伪类为开发者提供了强大的元素状态选择能力，从基础的交互反馈到复杂的结构化选择，都能在不增加 HTML 负担的前提下实现。掌握动态伪类、结构化伪类和表单伪类的使用场景，并结合实际项目灵活组合，是提升前端开发效率和页面交互质量的重要技能。

建议在日常开发中优先使用语义化伪类替代冗余的类名，同时关注新伪类规范的演进，逐步将 :is()、:where() 等新特性引入项目，以简化选择器逻辑并提高代码可维护性。