CSS伪类选择器深度解析：分类、应用与技巧

禁默

发布于 2025-12-20 19:16:57

1740

前言

本篇博客将深入讲解CSS伪类选择器，按照功能将其分类为：动态伪类、结构伪类、语言和否定伪类、以及UI伪类，并提供详细的用法、示例和注意事项，帮助更好地掌握这些强大的工具。

一、CSS伪类选择器分类

1. 动态伪类选择器

动态伪类主要用于控制元素在不同交互状态下的样式变化，通常与用户的鼠标操作或键盘操作相关。

常见的动态伪类

:hover —— 悬停状态
:active —— 被点击或按下的状态
:focus —— 获得焦点的状态
:focus-within —— 如果某元素或其子元素获得焦点
:focus-visible —— 当元素具有焦点且被键盘聚焦时

示例

<button>点击我</button>
<a href="#">悬停我</a>
<input type="text" placeholder="输入文本">

/* 悬停状态 */
a:hover {
  color: red;
}

/* 点击状态 */
button:active {
  background-color: green;
}

/* 焦点状态 */
input:focus {
  border: 2px solid blue;
}

/* 焦点内状态 */
div:focus-within {
  border: 2px solid purple;
}

/* 仅当键盘聚焦时显示焦点 */
input:focus-visible {
  outline: 3px solid orange;
}

注意事项

:hover和:active通常用于交互元素（如按钮、链接），能够给用户提供反馈。
:focus-within特别适用于表单元素，能够让整个父容器在任意子元素获取焦点时被高亮显示。

2. 结构伪类选择器

结构伪类选择器帮助你根据元素在文档中的位置或其父子关系来选中元素，而不依赖于元素的内容。

常见的结构伪类

:first-child —— 父元素的第一个子元素
:last-child —— 父元素的最后一个子元素
:nth-child(n) —— 父元素中第n个子元素
:nth-last-child(n) —— 从后往前数的第n个子元素
:only-child —— 父元素中唯一的子元素
:nth-of-type(n) —— 同类型元素的第n个子元素
:first-of-type —— 同类型元素的第一个
:last-of-type —— 同类型元素的最后一个
:empty —— 没有任何子元素的元素

示例

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

/* 父元素的第一个子元素 */
ul li:first-child {
  color: blue;
}

/* 父元素的最后一个子元素 */
ul li:last-child {
  color: red;
}

/* 第2个子元素 */
ul li:nth-child(2) {
  font-weight: bold;
}

/* 父元素中唯一的子元素 */
div:only-child {
  background-color: lightgray;
}

/* 只有第一项是li标签 */
ul li:first-of-type {
  font-size: 18px;
}

注意事项

:nth-child()可以接受数字、关键字odd（奇数）和even（偶数），也支持公式（如2n表示每两个元素）。
使用:nth-of-type()时，确保你选择的是同一类型的元素，如只选择<li>标签而不受其他标签影响。

3. 语言和否定伪类选择器

语言和否定伪类选择器主要用于通过元素的语言、类名、或者排除某些条件来选择元素。

常见的语言和否定伪类

:lang(language) —— 根据元素的语言属性选择元素
:not(selector) —— 排除与给定选择器匹配的元素

示例

<p lang="en">This is an English paragraph.</p>
<p lang="fr">C'est un paragraphe en français.</p>

/* 选择所有英语段落 */
p:lang(en) {
  color: blue;
}

/* 排除所有具有class="exclude"的元素 */
div:not(.exclude) {
  background-color: yellow;
}

注意事项

:lang()伪类选择器非常适用于国际化（i18n）网页设计，允许你根据不同的语言应用不同的样式。
:not()伪类可以用来排除不想匹配的元素，非常灵活，但要注意性能问题，在复杂选择器中使用时要谨慎。

4. UI伪类选择器

UI伪类选择器用于根据元素的UI状态（如是否选中、是否禁用等）进行选择。

常见的UI伪类

:checked —— 选中状态（如复选框或单选框）
:disabled —— 禁用状态
:enabled —— 启用状态
:required —— 必填状态
:optional —— 可选状态
:valid —— 表单元素内容有效
:invalid —— 表单元素内容无效

示例

<input type="checkbox" checked> 选中
<input type="checkbox"> 未选中
<input type="text" required>

/* 选中状态 */
input:checked {
  background-color: lightgreen;
}

/* 禁用状态 */
input:disabled {
  background-color: lightgray;
}

/* 必填状态 */
input:required {
  border: 2px solid red;
}

注意事项：

:checked常用于复选框和单选框，能够控制它们在选中状态时的样式。
:required和:optional是表单控件的伪类，常用于表单验证时应用不同样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI伪类</title>
    <style>
        /* 选中勾选的复选或者单选框 */
        input:checked{
            width:30px;
            height:30px;
        }
        /* 选中可用的输入框 */
        input:enabled{
            background-color:green;
        }
        /* 选中禁用的输入框 */
        input:disabled{
            background-color:grey;
        }
        input:required {
      border: 20px solid red;
}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="gender">
    <input type="radio" name="gender">
    <input type="password" required></input>
    <input type="text" disabled></input>
</body>
</html>