当前位置：首页 > news >正文

WHAT - CSS 伪类

news 来源：原创 2025/6/26 21:57:25

常见的 CSS 伪类

1. 用户交互相关

伪类	作用
`:hover`	当鼠标悬停在元素上时应用样式
`:active`	当元素被点击（激活）时应用样式
`:focus`	当元素获取焦点（如输入框被点击）时应用样式
`:focus-visible`	仅当元素通过键盘或某些输入方式获得焦点时生效

button:hover {
  background-color: lightblue;
}

input:focus {
  border: 2px solid blue;
}

2. 结构相关

伪类	作用
`:first-child`	选择属于其父元素的第一个子元素
`:last-child`	选择属于其父元素的最后一个子元素
`:nth-child(n)`	选择父元素的第 n 个子元素（从 1 开始计数）
`:nth-of-type(n)`	选择特定类型的第 n 个元素
`:only-child`	选择唯一的子元素
`:empty`	选择没有子元素的元素（包括文本节点）

p:first-child {
  color: red;
}

li:nth-child(odd) {
  background-color: lightgray; /* 选中奇数项 */
}

p:only-child {
  font-weight: bold;
}

这里 :empty 最经典的一个用法就是对于 antd table 支持 cell 为空时添加 - 兜底展示：

.ant-table-cell:empty:after,
.ant-table-cell span:empty:after {
    content: "-";
}

3. 表单相关

伪类	作用
`:checked`	选中复选框（checkbox）或单选框（radio）时生效
`:disabled`	选中禁用状态的表单元素
`:enabled`	选中可用状态的表单元素
`:required`	选中必填的输入框
`:valid` / `:invalid`	用于验证表单输入是否合法

input:checked {
  outline: 2px solid green;
}

input:disabled {
  background-color: lightgray;
}

4. 其他常用伪类

伪类	作用
`:not(selector)`	选中不匹配 `selector` 的元素
`:has(selector)`	选中包含某个子元素的父级（现代浏览器支持）
`:is(selector1, selector2)`	选择符合任意一个 `selector` 的元素
`:where(selector)`	类似 `:is()`，但无优先级影响

/* 选择所有不是 .disabled 的按钮 */
button:not(.disabled) {
  background-color: blue;
}

/* 选择所有包含 <img> 的 <div> */
div:has(img) {
  border: 2px solid red;
}

/* 选择 <h1> 或 <h2> */
:is(h1, h2) {
  font-size: 20px;
}