html中的伪类有哪些

发布时间：2021-12-23 15:06:30 作者：iii
来源：亿速云阅读：549

# HTML中的伪类有哪些

## 什么是伪类

伪类（Pseudo-class）是CSS中用于定义元素特殊状态的选择器。它们允许开发者根据用户交互、文档结构或其他外部条件来样式化元素，而无需修改HTML结构或添加额外的class。

伪类的语法特征是在选择器后跟一个冒号（:），例如`:hover`或`:first-child`。CSS3规范将伪类与伪元素（::）明确区分开来。

---

## 伪类的主要分类

### 1. 用户交互伪类

这些伪类与用户的交互行为相关：

- `:hover` - 鼠标悬停在元素上时
- `:active` - 元素被激活（如鼠标点击）时
- `:focus` - 元素获得焦点时（如表单输入）
- `:focus-visible` - 元素通过键盘导航获得焦点时
- `:focus-within` - 元素或其子元素获得焦点时

```css
button:hover {
  background-color: #4CAF50;
}
input:focus {
  border-color: blue;
}

2. 结构伪类

基于文档结构的伪类选择器：

:first-child - 选择父元素的第一个子元素
:last-child - 选择父元素的最后一个子元素
:nth-child(n) - 选择父元素的第n个子元素
:nth-last-child(n) - 从末尾开始计数
:only-child - 选择没有兄弟元素的子元素
:first-of-type - 选择同类型中的第一个
:last-of-type - 选择同类型中的最后一个
:nth-of-type(n) - 选择同类型中的第n个
:empty - 选择没有子元素的元素

li:nth-child(odd) {
  background: #f2f2f2;
}
p:first-of-type {
  font-size: 1.2em;
}

3. 表单相关伪类

专门用于表单元素的伪类：

:checked - 被选中的单选/复选框
:disabled - 被禁用的表单元素
:enabled - 可用的表单元素
:required - 标记为必填的字段
:optional - 非必填字段
:valid - 通过验证的输入
:invalid - 未通过验证的输入
:in-range/:out-of-range - 数值范围判断
:read-only/:read-write - 读写状态

input:invalid {
  border-color: red;
}
checkbox:checked + label {
  font-weight: bold;
}

4. 链接伪类

专门用于超链接的状态：

:link - 未访问的链接
:visited - 已访问的链接

a:link { color: blue; }
a:visited { color: purple; }

5. 其他特殊伪类

:target - URL片段标识符匹配的元素
:root - 文档根元素（通常是html）
:not(selector) - 反向选择器
:lang(language) - 根据语言属性选择
:is()/:where() - 分组选择器（CSS4）

:target {
  background: yellow;
}
article:not(.featured) {
  opacity: 0.8;
}

伪类的组合使用

伪类可以与其他选择器组合使用：

/* 表格奇数行且悬停时 */
tr:nth-child(odd):hover {
  background: #e6f7ff;
}

/* 非第一个子元素的段落 */
p:not(:first-child) {
  margin-top: 1em;
}

浏览器兼容性注意事项

新伪类（如:focus-visible）需要现代浏览器支持
部分伪类（如:has()）仍处于实验阶段
移动设备上:hover行为可能与桌面不同

可以使用@supports规则进行特性检测：

@supports selector(:focus-visible) {
  button:focus-visible {
    outline: 3px solid blue;
  }
}

伪类的最佳实践

保持可访问性：确保交互状态有视觉反馈
性能优化：避免在大型DOM树上使用复杂伪类
渐进增强：新伪类应作为增强体验而非核心功能
组合使用：:not()与结构伪类结合可创建强大选择器

/* 好例子：清晰的视觉反馈 */
button:focus, button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 避免：可能影响性能 */
div :nth-child(3n+1) span:hover {
  /* 复杂选择器 */
}

未来发展趋势（CSS4）

:has() - 父选择器（已部分支持）
:dir() - 文字方向选择
:user-invalid - 用户交互后的无效状态
增强的:nth-child()功能

/* 未来可能支持的语法 */
section:has(h2.special) {
  border: 1px solid gold;
}

总结表格

类别	常用伪类	典型应用场景
交互	:hover, :active	按钮状态、菜单交互
结构	:nth-child, :empty	列表样式、网格布局
表单	:checked, :valid	表单验证、自定义控件
链接	:link, :visited	导航样式
其他	:target, :not()	单页应用、条件样式

通过合理使用伪类，开发者可以创建更动态、响应式的界面，而无需增加HTML复杂度或依赖JavaScript。理解各种伪类的特性和浏览器支持情况，是成为CSS高手的重要一步。 “`

注：本文约1450字，全面介绍了HTML/CSS中的伪类分类、语法示例和实际应用技巧。如需调整字数或补充特定内容，可进一步扩展具体示例或浏览器兼容性细节。