css伪类-CFANZ编程社区

CSS伪类选择器是CSS中用于选择元素特定状态或位置的特殊关键字，它们让开发者能够根据用户行为、文档结构或元素状态动态地应用样式，而无需修改HTML结构或依赖JavaScript。

1. 伪类选择器基本概念与语法

伪类选择器以冒号(:)开头，附加在基础选择器之后，用于定义元素在特定状态下的样式。其基本语法格式为：

selector:pseudo-class {
  property: value;
}

例如，a:hover { color: red; }表示当鼠标悬停在链接上时，链接文字变为红色。

2. 主要伪类选择器分类及应用

2.1 动态伪类选择器（用户交互伪类）

动态伪类根据用户交互行为改变元素样式：

:hover - 鼠标悬停在元素上时的状态

button:hover { background-color: #4CAF50; }

:active - 元素被激活（如鼠标按下）时的状态

button:active { background-color: green; }

:focus - 元素获得焦点时的状态（常用于表单元素）

input:focus { border-color: blue; }

链接特定状态：

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

注意：定义链接状态伪类时，必须按照LVHA顺序（:link、:visited、:hover、:active）编写，否则可能失效。

2.2 结构伪类选择器

结构伪类根据元素在文档树中的位置进行选择：

:first-child - 选择父元素的第一个子元素

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

:last-child - 选择父元素的最后一个子元素
:nth-child(n) - 选择父元素的第n个子元素

/* 奇数行 */
tr:nth-child(odd) { background-color: #f2f2f2; }

/* 偶数行 */
li:nth-child(2n) { color: red; }

/* 前3个元素 */
div:nth-child(-n+3) { border-left: 3px solid #2196F3; }

:nth-of-type(n) - 选择同类型兄弟元素中的第n个（与:nth-child的区别在于它只计算同类型元素）
:empty - 选择没有子元素的元素（包括文本节点）

2.3 UI元素状态伪类选择器

主要用于表单元素的状态反馈：

:checked - 被选中的单选按钮或复选框

input[type="checkbox"]:checked { accent-color: #ff6b6b; }

:disabled - 被禁用的表单元素

input:disabled { background: #f5f5f5; }

:enabled - 可用的表单元素
:valid/:invalid - 根据输入验证结果应用样式
:required - 标记为必填的输入字段

2.4 其他实用伪类选择器

:not(selector) - 否定伪类，选择不匹配指定选择器的元素

div:not(.text3) { color: red; } /* 选择所有不包含text3类的div */

:target - 当元素ID与URL锚点匹配时（如http://example.com/#section）
:root - 选择文档的根元素（通常是<html>）
:lang(language) - 根据语言属性选择元素

3. 伪类选择器使用技巧与注意事项

3.1 组合使用

伪类选择器可以组合使用以实现更精细的控制：

/* 鼠标悬停且获得焦点的按钮 */
button:hover:focus { 
  text-decoration: underline;
}

/* 已访问链接的悬停状态 */
a:visited:hover { 
  color: darkblue; 
}

/* 偶数行的悬停效果 */
tr:nth-child(even):hover { 
  background: #f8f9fa; 
}