【CSS-7】深入解析CSS伪类：从基础到高级应用

news2025/6/9 16:44:25

CSS伪类是前端开发中不可或缺的强大工具，它们允许我们根据文档树之外的信息或简单选择器无法表达的状态来样式化元素。本文将全面探讨CSS伪类的各种类型、使用场景和最佳实践。

1. 伪类基础概念

1.1 什么是伪类？

伪类（Pseudo-class）是CSS中的一种特殊关键字，用于选择元素的特定状态或特征。它们以冒号(:)开头，可以附加到选择器末尾来定义元素在特定状态下的样式。

/* 语法 */
selector:pseudo-class {
  property: value;
}

/* 示例 - 链接悬停状态 */
a:hover {
  color: #ff4500;
}

1.2 伪类与伪元素的区别

伪类：选择元素的特定状态（如:hover、:focus）
伪元素：选择元素的特定部分（如::before、::first-line）

2. 常用伪类详解

2.1 用户交互伪类

2.1.1 :hover - 鼠标悬停状态

button:hover {
  background-color: #4CAF50;
  transform: translateY(-2px);
}

2.1.2 :active - 激活状态（元素被点击时）

button:active {
  transform: translateY(1px);
}

2.1.3 :focus - 获得焦点状态

input:focus {
  outline: 2px solid #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

2.1.4 :focus-visible - 键盘焦点状态

button:focus-visible {
  outline: 2px dashed #000;
}

2.2 结构伪类

2.2.1 :first-child / :last-child

/* 列表首项样式 */
li:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* 列表末项样式 */
li:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

2.2.2 :nth-child() - 强大的序号选择

/* 隔行变色 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择前3项 */
li:nth-child(-n+3) {
  font-weight: bold;
}

/* 复杂模式：3n+1 (1,4,7...) */
div:nth-child(3n+1) {
  margin-right: 0;
}

2.2.3 :nth-of-type() - 按类型选择

/* 每第三个段落 */
p:nth-of-type(3n) {
  color: #e91e63;
}

2.2.4 :not() - 反向选择

/* 选择所有不是.disabled的按钮 */
button:not(.disabled) {
  cursor: pointer;
}

/* 复合使用 */
li:not(:first-child):not(:last-child) {
  padding: 8px 0;
}

2.3 表单相关伪类

2.3.1 :checked - 选中状态

input[type="checkbox"]:checked + label {
  color: #4CAF50;
  font-weight: bold;
}

2.3.2 :disabled / :enabled

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

input:enabled {
  border-color: #66afe9;
}

2.3.3 :valid / :invalid

input:valid {
  border-color: #4CAF50;
}

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

2.3.4 :placeholder-shown

input:placeholder-shown {
  font-style: italic;
  color: #999;
}

2.4 其他实用伪类

2.4.1 :target - URL片段标识的目标元素

section:target {
  background-color: #fffde7;
  animation: highlight 1s ease;
}

2.4.2 :empty - 空元素

div.empty:empty {
  display: none;
}

div.empty:not(:empty) {
  padding: 15px;
}

2.4.3 :root - 文档根元素

:root {
  --primary-color: #4285f4;
  --base-font-size: 16px;
}

3. CSS Level 4新增伪类

3.1 :is() - 简化选择器列表

/* 传统写法 */
header h1, header h2, header h3 {
  font-family: 'Roboto', sans-serif;
}

/* 使用:is() */
header :is(h1, h2, h3) {
  font-family: 'Roboto', sans-serif;
}

3.2 :where() - 低特异性选择

/* 特异性为0,0,1 */
article :where(h1, h2, h3) {
  margin-top: 1em;
}

3.3 :has() - 父元素选择器（最强大）

/* 选择包含img的article */
article:has(img) {
  background: #f5f5f5;
}

/* 选择后面跟着p的h2 */
h2:has(+ p) {
  margin-bottom: 0;
}

4. 伪类的高级应用技巧

4.1 组合使用伪类

/* 悬停且获得焦点的按钮 */
button:hover:focus {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
}

/* 非第一个且非最后一个列表项 */
li:not(:first-child):not(:last-child) {
  padding: 8px 0;
}

4.2 动画与过渡结合

.menu-item {
  transition: transform 0.3s ease;
}

.menu-item:hover {
  transform: scale(1.05);
}

.menu-item:active {
  transform: scale(0.98);
}

4.3 自定义表单控件

/* 自定义复选框 */
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  margin-right: 8px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label::before {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

input[type="checkbox"]:disabled + label {
  color: #aaa;
}

4.4 响应式设计增强

/* 鼠标设备与触摸设备区分 */
@media (hover: hover) {
  /* 只在支持悬停的设备上应用 */
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
}

@media (hover: none) {
  /* 触摸设备专用样式 */
  .card:active {
    transform: scale(0.98);
  }
}

5. 性能与最佳实践

5.1 性能优化

避免过度复杂的伪类组合
优先使用类选择器替代结构性伪类（如:nth-child）
注意:hover在移动设备上的表现

5.2 可访问性考虑

不要仅依赖颜色变化表示状态
确保:focus状态明显可见
为自定义控件提供适当的ARIA属性

5.3 浏览器兼容性

使用特性检测（如@supports）处理新伪类
为关键功能提供渐进增强方案
考虑使用PostCSS或Autoprefixer处理前缀

6. 伪类的未来

CSS选择器Level 4规范正在引入更多强大的伪类：

/* 匹配包含特定数量子元素的父元素 */
.container:has(> .item:nth-child(5)) {
  grid-template-columns: repeat(5, 1fr);
}

/* 方向性伪类 */
:dir(rtl) {
  text-align: right;
}

/* 范围伪类 */
p:read-only {
  background-color: #f5f5f5;
}