CSS伪类选择器全解析：让你的样式更加灵活和智能

禁默

发布于 2025-12-20 19:17:53

530

前言

在CSS中，伪类选择器是非常强大的工具，它们可以帮助你在页面样式中根据元素的特定状态进行动态调整。这些选择器让我们能够无需额外的JavaScript代码，仅通过CSS就实现诸如按钮按下、链接悬停等交互效果，使得网页的表现力大大增强。

本篇博客将详细讲解CSS中的常见伪类选择器，包括其语法、应用场景和注意事项。

一、什么是伪类选择器？

伪类是CSS中用于选中元素特定状态或特定条件下的特殊选择器。它们通常用于选中那些不是DOM树中某个元素的本身，但我们依然希望能够应用样式的情况。例如，当用户将鼠标悬停在链接上时，链接的样式可能需要改变，或者在表单元素获得焦点时需要突出显示。

伪类选择器的语法如下

selector:pseudo-class {
  property: value;
}

常见的伪类选择器分为几类：交互状态伪类、结构伪类、表单元素伪类等。

二、常见的伪类选择器详解

1. `:hover` —— 悬停状态

:hover是最常见的伪类之一，用于选中鼠标悬停在元素上的状态。常用在按钮、链接等元素上，以实现交互效果。

<a href="#">悬停链接</a>

a:hover {
  color: red;
  text-decoration: underline;
}

当用户将鼠标悬停在链接上时，链接文字颜色变为红色，并添加下划线。

2. `:active` —— 活动状态

:active用于选中当前被用户点击的元素状态。常用于按钮、链接等元素上，表示用户正在点击该元素。

<button>点击我</button>

button:active {
  background-color: green;
}

当用户点击按钮时，按钮背景颜色变为绿色。

3. `:focus` —— 焦点状态

:focus用于选中获得键盘输入焦点的元素。常用于表单输入框、按钮等，能够使元素在获得焦点时表现突出。

<input type="text" placeholder="请输入内容">

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

当用户点击输入框或通过键盘导航聚焦输入框时，输入框的边框变为蓝色。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态伪类</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color: blue;
        }
        /* 访问过的链接 */
        a:visited{
            color: green;
        }
        /* 鼠标悬停 */
        a:hover{
            color: red;
        }
        /* 激活的链接 */
        a:active{
            color: yellow;
        }
        span:hover{
            color: red;
        }
        span:active{
            color: yellow;
        }
        /* 获得焦点--输入框获得焦点 */
        input:focus,select:focus{
            color:brown;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.hao123.com">你好</a>
    <br>
    <span>hello</span>
    <br>
    <input type="text" >
    <input type="text" >
    <input type="text" >
    <select>
        <option>四川</option>
        <option>北京</option>
        <option>上海</option>
    </select>
</body>
</html>

4. `:first-child` —— 第一个子元素

:first-child伪类选择器用于选中父元素中的第一个子元素，不管该元素的类型是什么。

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

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

第一个<li>元素会加粗，而其他项不会受到影响。

: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 —— 没有任何子元素的元素

5. `:last-child` —— 最后一个子元素

:last-child与:first-child类似，用于选中父元素中的最后一个子元素。

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

ul li:last-child {
  color: green;
}

最后一个<li>元素的文字颜色变为绿色。

6. `:nth-child(n)` —— 按顺序选中特定子元素

:nth-child(n)允许你选择父元素中的特定位置的子元素。这里的n可以是具体的数字、公式或关键词。

<ul>
  <li>项1</li>
  <li>项2</li>
  <li>项3</li>
</ul>

ul li:nth-child(2) {
  color: orange;
}

这里，第二个<li>元素的文本颜色将变为橙色。

ul li:nth-child(odd) {
  background-color: lightgray;
}

odd表示所有奇数位置的元素将应用背景色。

7. `:not(selector)` —— 非选择器

:not()是一个非常实用的伪类，它选中不匹配指定选择器的元素。它是CSS中唯一一个能够选择不匹配条件的伪类，广泛应用于排除特定元素。

<ul>
  <li class="highlight">项1</li>
  <li>项2</li>
  <li class="highlight">项3</li>
</ul>

ul li:not(.highlight) {
  color: gray;
}

所有不具有highlight类的<li>元素将呈现灰色。

三、表单元素相关伪类

表单元素伪类选择器专门用于控制表单元素的状态。以下是一些常见的伪类：

1. `:checked` —— 选中状态

:checked用于选中已被勾选或已选中的复选框、单选框等。

<input type="checkbox" checked>选项1
<input type="checkbox">选项2

input:checked {
  background-color: yellow;
}

已勾选的复选框背景色变为黄色。

2. `:disabled` —— 禁用状态

:disabled用于选中被禁用的表单元素。

<input type="text" disabled>

input:disabled {
  background-color: #e0e0e0;
}

禁用的输入框背景色变为灰色。

3. `:required` —— 必填状态

:required用于选中标记为“必填”的表单元素。

<input type="text" required>

input:required {
  border: 2px solid red;
}

标记为必填的输入框将呈现红色边框。

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

四、伪类选择器应用技巧

1. 结合使用多个伪类选择器

你可以将多个伪类选择器组合在一起，增加选择的精确度。例如，选中同时满足:hover和:focus状态的元素。

a:hover:focus {
  color: blue;
}

当链接既被悬停（hover）又获得焦点（focus）时，颜色变为蓝色。

2. 改善用户体验

伪类选择器广泛应用于改善用户交互体验。例如，:focus可以让表单元素在获得焦点时具有明显的样式，帮助用户在填写表单时获得更好的视觉反馈。

五、总结

CSS伪类选择器是让页面样式更加动态、交互性更强的利器。通过掌握伪类选择器的应用，我们可以轻松实现悬停、点击、焦点等状态下的样式变化，使网页更加生动、互动，提升用户体验。常用的伪类如:hover、:active、:focus等是日常开发中必不可少的工具，熟练掌握这些伪类，将大大增强网页设计能力。

下篇博客我们将伪类选择器进行分类整合，让大家有一个更好的理解记忆，

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-12-09，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度