伪类选择器的分类与应用

伪类选择器是CSS中一种强大的工具，允许开发者根据元素的状态、位置或其他动态条件来精确选择并应用样式。它们扩展了基础选择器的功能，使得界面交互更加灵活。

伪类选择器的基本分类

伪类选择器可分为以下几大类：

1. 状态伪类：基于用户交互或元素状态（如悬停、聚焦等）进行选择。
2. 结构伪类：根据元素在DOM树中的位置（如子元素顺序）进行选择。
3. 表单伪类：针对表单元素的状态（如禁用、选中等）进行选择。
4. 其他伪类：如语言选择器或全屏模式下的伪类。

状态伪类的应用

状态伪类响应用户行为或元素状态变化，常见的有：

• :hover：鼠标悬停时触发。
• :active：元素被激活（如点击）时生效。
• :focus：元素获得焦点时应用样式。
• :visited：适用于已访问的链接。

/* 按钮悬停效果 */
button:hover {
  background-color: #4CAF50;
  transform: scale(1.05);
}

/* 输入框聚焦样式 */
input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

结构伪类的实战用法

结构伪类通过DOM层级关系选择元素，典型示例包括：

• :first-child / :last-child：选择父元素的第一个或最后一个子元素。
• :nth-child(n)：按公式选择子元素。
• :not(selector)：排除特定选择器的元素。

/* 列表隔行变色 */
li:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 排除最后一个列表项 */
li:not(:last-child) {
  border-bottom: 1px dashed #ccc;
}

表单伪类的专项控制

针对表单控件的伪类能提升用户体验：

• :checked：匹配被选中的单选/复选框。
• :disabled：选择禁用的表单元素。
• :valid / :invalid：根据输入验证状态应用样式。

<style>
  /* 自定义复选框选中状态 */
  input[type="checkbox"]:checked + label {
    color: #FF5722;
    font-weight: bold;
  }

  /* 无效输入提示 */
  input:invalid {
    border-color: #F44336;
  }
</style>

<input type="checkbox" id="agree">
<label for="agree">同意条款</label>

<input type="email" placeholder="输入有效邮箱" required>

组合伪类的进阶技巧

通过组合伪类可以实现更复杂的选择逻辑：

/* 表格首行首列特殊样式 */
tr:first-child td:first-child {
  border-top-left-radius: 8px;
}

/* 非空输入框的提示样式 */
input:not(:placeholder-shown) {
  background-color: #FFF9C4;
}

动态伪类与性能考量

某些伪类（如:hover）会触发浏览器重绘。在移动端开发中，建议将:active状态与触摸事件结合：

/* 移动端点击反馈 */
button:active {
  opacity: 0.8;
  transition: opacity 0.1s;
}

浏览器兼容性实践

部分伪类需要前缀或替代方案：

/* 旧版火狐滚动条样式 */
::-moz-progress-bar {
  background-color: #00BCD4;
}

/* Webkit浏览器输入框自动填充样式 */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

伪类与伪元素的联合使用

伪类常与伪元素配合实现复杂效果：

/* 首字母下沉效果 */
p:first-of-type::first-letter {
  font-size: 2em;
  float: left;
  line-height: 1;
}

/* 工具提示动画 */
.tooltip:hover::after {
  content: attr(data-tip);
  position: absolute;
  /* 定位样式 */
}