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

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

news 2025/9/29 22:29:23

前言

一、什么是伪类选择器？

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

1. :hover —— 悬停状态

2. :active —— 活动状态

3. :focus —— 焦点状态

综合案例

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

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

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

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

三、表单元素相关伪类

1. :checked —— 选中状态

2. :disabled —— 禁用状态

3. :required —— 必填状态

四、伪类选择器应用技巧

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

2. 改善用户体验

五、总结

前言

在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等是日常开发中必不可少的工具，熟练掌握这些伪类，将大大增强网页设计能力。

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

前言

一、什么是伪类选择器？

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

1. :hover —— 悬停状态

2. :active —— 活动状态

3. :focus —— 焦点状态

综合案例

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

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

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

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

三、表单元素相关伪类

1. :checked —— 选中状态

2. :disabled —— 禁用状态

3. :required —— 必填状态

四、伪类选择器应用技巧

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

2. 改善用户体验

五、总结

相关文章：

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

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

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

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

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

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

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

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

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

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