CSS 伪类（Pseudo-classes）的详细介绍

devtools/2025/2/11 20:47:56/

CSS 伪类详解与示例

在日常的前端开发中，CSS 伪类可以帮助我们非常精准地选择元素或其特定状态，从而达到丰富页面表现的目的。本文将详细介绍以下伪类的使用：

  • 表单相关伪类
    :checked、:disabled、:enabled、:in-range、:invalid、:optional、:out-of-range、:read-only、:read-write、:required、:valid

  • 结构相关伪类
    :empty、:first-of-type、:last-child、:last-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:only-of-type、:only-child、:not(selector)

  • 链接与用户交互状态伪类
    :link、:visited、:active、:hover、:focus、:target

  • 其他常用伪类
    :root、:lang(language)

  • 伪元素
    ::first-letter、::first-line、::before、::after

下面我们通过具体实例来逐一说明它们的用法。

1. 表单相关伪类

1.1 :checked

用于选中已被选中的表单元素。比如下面的复选框和单选按钮，在选中后，文本颜色变为绿色。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:checked 示例</title><style>input:checked + label {font-weight: bold;color: green;}</style>
</head>
<body><h3>:checked 示例</h3><input type="checkbox" id="cb1"><label for="cb1">复选框 1</label><br><input type="radio" name="group" id="r1"><label for="r1">单选按钮 1</label><input type="radio" name="group" id="r2"><label for="r2">单选按钮 2</label>
</body>
</html>

在这里插入图片描述

1.2 :disabled 与 :enabled

选择被禁用或启用的表单元素。可以通过不同的样式提示用户哪些输入项不能使用或可以交互。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:disabled 和 :enabled 示例</title><style>input:disabled {background-color: #f5f5f5;cursor: not-allowed;}input:enabled {border: 1px solid #66afe9;}</style>
</head>
<body><h3>表单状态示例</h3><input type="text" placeholder="启用的文本框"><br><br><input type="text" placeholder="禁用的文本框" disabled>
</body>
</html>

在这里插入图片描述

1.3 :in-range 与 :out-of-range

用于为指定范围内或超出范围的输入框设置样式。适用于例如数字输入、日期输入等场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:in-range 与 :out-of-range 示例</title><style>input:in-range {border-color: green;}input:out-of-range {border-color: red;}</style>
</head>
<body><h3>取值范围验证</h3><!-- 设置 min 和 max 属性 --><input type="number" min="1" max="10" value="5"><br><br><input type="number" min="1" max="10" value="20">
</body>
</html>

在这里插入图片描述

1.4 :invalid 与 :valid

结合 HTML5 表单验证，可以区分用户输入的合法性，为合法或非法的状态加以不同样式提示。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:valid 与 :invalid 示例</title><style>input:valid {border-color: green;}input:invalid {border-color: red;}</style>
</head>
<body><h3>表单验证</h3><!-- 使用 required 限制必填，pattern 限制格式 --><input type="email" placeholder="请输入有效的邮箱" required>
</body>
</html>

在这里插入图片描述

1.5 :optional, :read-only, :read-write, :required

这些伪类针对不同属性的输入框进行样式区分，比如区分必填与选填、只读与可编辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:optional 与 :required 示例</title><style>input:optional {background-color: #e6f7ff;}input:required {background-color: #fff1f0;}</style>
</head>
<body><h3>必填与选填示例</h3><input type="text" placeholder="选填项"><br><br><input type="text" placeholder="必填项" required>
</body>
</html>

在这里插入图片描述

2. 结构相关伪类

2.1 :empty

选择没有任何子元素（包括文本节点）的元素。比如下面的 <p> 标签，如果没有内部内容，会被设置背景色。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:empty 示例</title><style>p:empty {background-color: #f9f9f9;border: 1px dashed #ccc;min-height: 50px;}</style>
</head>
<body><h3>:empty 示例</h3><p>这一段有内容，不会被选中</p><p></p>
</body>
</html>

在这里插入图片描述

2.2 :first-of-type 与 :last-of-type

用于选择同一父元素中的第一个或最后一个特定类型的子元素。假设一个容器中有多个 <p> 标签，下面示例分别标记第一个和最后一个 <p>：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:first-of-type 与 :last-of-type 示例</title><style>p:first-of-type {color: blue;}p:last-of-type {color: red;}</style>
</head>
<body><h3>结构中的第一个与最后一个<p></h3><div><p>第一段，应该显示为蓝色</p><p>中间段</p><p>最后一段，应该显示为红色</p></div>
</body>
</html>

在这里插入图片描述

2.3 :first-child 与 :only-child

  • :first-child 选择作为父元素第一个子元素的指定元素
  • :only-child 选择仅存在唯一子元素时的指定元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:first-child 与 :only-child 示例</title><style>p:first-child {font-weight: bold;}p:only-child {font-style: italic;color: purple;}</style>
</head>
<body><h3>只有一个子元素的示例</h3><div><p>我是唯一的子元素，应该应用 :only-child 样式</p></div><div><p>我是第一个子元素，应该应用 :first-child 样式</p><p>我是第二个子元素，不应用 :first-child 样式</p></div>
</body>
</html>

在这里插入图片描述

2.4 :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n)

这四个伪类可以用来根据子元素的索引位置来选取元素。

  • p:nth-child(2)：选择父元素的第二个子元素，并且它是 <p> 标签
  • p:nth-last-child(2)：选择倒数第二个子元素，如果它是 <p>
  • p:nth-of-type(2)：在同一类型中选择第二个 <p>
  • p:nth-last-of-type(2)：在同一类型中选择倒数第二个 <p>

下面通过一个示例来说明：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:nth-child 与 :nth-of-type 示例</title><style>/* 父元素中第二个子元素（无论类型） */div > *:nth-child(2) {background-color: #dff0d8;}/* 父元素中第二个<p>标签 */p:nth-of-type(2) {border: 1px solid #f0ad4e;}</style>
</head>
<body><h3>:nth-child 与 :nth-of-type 示例</h3><div><span>第一个子元素</span><p>这是第二个子元素，也同时是第一个<p>？</p><p>这是第二个<p>类型的子元素，将被边框标记</p></div>
</body>
</html>

在这里插入图片描述

2.5 :not(selector)

用于排除某些元素。例如下面的示例中，除 <p> 外的其他所有元素都会被应用灰色背景：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:not 示例</title><style>*:not(p) {background-color: #eee;}</style>
</head>
<body><h3>:not 示例</h3><p>我不会有灰色背景</p><div>我会有灰色背景</div><span>我也会有灰色背景</span>
</body>
</html>

3. 链接与用户交互状态伪类

3.1 链接的伪类：:link、:visited、:active、:hover

这些伪类用于定义链接在不同状态下的样式，例如未访问、已访问、鼠标悬停以及活动时的表现。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>链接伪类示例</title><style>a:link {color: blue;}a:visited {color: purple;}a:hover {text-decoration: underline;}a:active {color: red;}</style>
</head>
<body><h3>链接状态示例</h3><p>这是一个 <a href="https://www.example.com" target="_blank">示例链接</a>。尝试点击或将鼠标悬停在链接上看看效果。</p>
</body>
</html>

3.2 :focus

用于选中当前获得焦点的元素，常见于表单输入，帮助用户清楚知道当前输入位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:focus 示例</title><style>input:focus {border-color: #66afe9;box-shadow: 0 0 8px rgba(102,175,233,0.6);}</style>
</head>
<body><h3>:focus 示例</h3><input type="text" placeholder="点击后试试">
</body>
</html>

在这里插入图片描述

3.3 :target

用于选中当前 URL 锚点对应的元素。假设页面中有一个元素的 id 为 news，当 URL 包含 #news 时，该元素会被选中。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:target 示例</title><style>#news:target {background-color: #ffe58f;padding: 10px;}</style>
</head>
<body><h3>:target 示例</h3><p>点击下面的链接跳转到新闻区域：</p><a href="#news">跳转到新闻</a><div style="margin-top: 50px;"><p id="news">这是新闻内容区域，当 URL 中包含 #news 时，我会被高亮显示。</p></div>
</body>
</html>

在这里插入图片描述

4. 其他伪类与伪元素

4.1 :root

:root 选择器选中文档的根元素（通常是 <html>），经常用来定义全局 CSS 变量或全局样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:root 示例</title><style>:root {--main-bg-color: #f0f8ff;}body {background-color: var(--main-bg-color);}</style>
</head>
<body><h3>:root 示例</h3><p>背景颜色由 CSS 变量控制。</p>
</body>
</html>

在这里插入图片描述

4.2 :lang(language)

根据元素的语言属性设定样式。比如下面示例中，所有 lang="it"（意大利语）的 <p> 元素会使用特殊样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>:lang 示例</title><style>p:lang(it) {color: green;font-weight: bold;}</style>
</head>
<body><h3>:lang 示例</h3><p lang="it">Questo è un testo in italiano.</p><p lang="en">This is an English text.</p>
</body>
</html>

在这里插入图片描述

4.3 伪元素 ::first-letter、::first-line、::before、::after

伪元素可以在元素内容前后或内部特定位置插入样式，比如首字母、首行等，为排版加分。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪元素 示例</title><style>p::first-letter {font-size: 200%;color: #d9534f;}p::first-line {font-weight: bold;}p::before {content: "【开始】";color: #5bc0de;}p::after {content: "【结束】";color: #5cb85c;}</style>
</head>
<body><h3>伪元素应用</h3><p>这是一段用于展示伪元素效果的文本。</p>
</body>
</html>

在这里插入图片描述

结语

CSS 中的伪类和伪元素能让我们无需增加额外的 HTML 结构，通过直接在样式中操作状态和结构特性，打造出更智能和富有表现力的页面效果。上面的示例覆盖了常用的伪类应用场景，希望大家能够在实际项目中灵活使用，极大地提升前端开发效率。

如果你对某个伪类的用法还有疑问，欢迎在评论区留言讨论，互相学习交流！

这篇博客详细讲述了如何使用 CSS 伪类为页面元素添加交互、校验和结构化样式，不仅展示了基本用法，也提供了实际案例。希望这篇文章能帮助你在实际项目中更好地理解和应用 CSS 伪类。


http://www.ppmy.cn/devtools/158023.html

相关文章

Vue.js学习阶段常用插件

Vue.js学习阶段常用插件

1. Chinese (Simplified) 装上这个插件界面就可以进行汉化了 2.Auto Rename Tag Auto Rename Tag当你修改标签的时候&#xff0c;自动完成另一侧标签的同步修改&#xff1b; 3.Vetur Vue多功能集成插件&#xff0c;包括&#xff1a;语法高亮&#xff0c;智能提示&#x…
阅读更多...
傅里叶单像素成像技术研究进展

傅里叶单像素成像技术研究进展

摘要&#xff1a;计算光学成像&#xff0c;通过光学系统和信号处理的有机结合与联合优化实现特定成像特性的成像系统&#xff0c;摆脱了传统成像系统的限制&#xff0c;为光学成像技术添加了浓墨重彩的一笔&#xff0c;并逐步向简单化与智能化的方向发展。单像素成像(Single-Pi…
阅读更多...
window 安装GitLab服务器笔记

window 安装GitLab服务器笔记

视频&#xff1a; windows下内网本地部署gitlab 资源&#xff1a; Linux CeneOS7&#xff1a; CentOS7 镜像下载地址 VMware&#xff1a; 虚拟机17.6下载地址 安装vim编辑器 yum install vim -y系统环境升级&#xff08;我第一次没有使用。第二次成功使用了的&#xff09;…
阅读更多...
【shellbash进阶系列】(四)SHELL脚本--变量(基础)

【shellbash进阶系列】(四)SHELL脚本--变量(基础)

变量存在于内存中。假设变量str&#xff0c;设置或修改变量属性时&#xff0c;不带$号&#xff0c;只有引用变量的值时才使用$号。也就是说在内存中&#xff0c;标记变量的变量名称是str&#xff0c;而不是$str。 1.4.1 环境变量 环境变量就是运行在"环境"上下文的&…
阅读更多...
数据库高安全—数据保护：数据动态脱敏

数据库高安全—数据保护：数据动态脱敏

书接上文数据库高安全—审计追踪&#xff1a;传统审计&统一审计&#xff0c;从传统审计和统一审计两方面对高斯数据库的审计追踪技术进行解读&#xff0c;本篇将从数据动态脱敏方面对高斯数据库的数据保护技术进行解读。 5.1 数据动态脱敏 数据脱敏&#xff0c;顾名思义就…
阅读更多...
NLP面试-Transformer

NLP面试-Transformer

一、动机篇 1.1 为什么要有 Transformer? 为什么要有 Transformer? 首先需要知道在 Transformer 之前都有哪些技术&#xff0c;这些技术所存在的问题&#xff1a; RNN&#xff1a;能够捕获长距离依赖信息&#xff0c;但是无法并行&#xff1b;CNN: 能够并行&#xff0c;无…
阅读更多...
Scala语言的循环实现

Scala语言的循环实现

Scala语言中的循环实现 Scala是一种现代编程语言&#xff0c;它结合了面向对象和函数式编程的特点&#xff0c;广泛应用于大数据处理、分布式计算和Web开发等领域。循环是程序设计中不可或缺的一部分&#xff0c;在Scala中也有多种方式来实现循环。这篇文章将深入探讨Scala中的…
阅读更多...
Visual Studio踩过的坑

Visual Studio踩过的坑

统计Unity项目代码行数 编辑-查找和替换-在文件中查找 查找内容输入 b*[^:b#/].*$ 勾选“使用正则表达式” 文件类型留空 也有网友做了指定&#xff0c;供参考 !*\bin\*;!*\obj\*;!*\.*\*!*.meta;!*.prefab;!*.unity 打开Unity的项目 注意&#xff1a;只是看&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023