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

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.mzph.cn/web/68186.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch 开放推理 API 增加了 Azure AI Studio 支持

Elasticsearch 开放推理 API 增加了 Azure AI Studio 支持

作者&#xff1a;来自 Elastic Mark Hoy Elasticsearch 开放推理 API 现已支持 Azure AI Studio。在此博客中了解如何将 Azure AI Studio 功能与 Elasticsearch 结合使用。 作为我们持续致力于为 Microsoft Azure 开发人员提供他们选择的工具的一部分&#xff0c;我们很高兴地宣…
阅读更多...
JUC学习笔记02

JUC学习笔记02

文章目录 JUC笔记2练习题&#xff1a;手写线程池代码解释&#xff1a;AdvancedThreadPool 类&#xff1a;WorkerThread 内部类&#xff1a;AdvancedThreadPoolExample 类&#xff1a; 线程池的思考CPU密集型IO密集型 练习题&#xff1a;手写自动重试机练习题&#xff1a;手写定…
阅读更多...
baigeiRSA

baigeiRSA

baigeiRSA 打开附件有两个&#xff1a; 1.import libnumfrom Crypto.Util import numberfrom secret import flag​size 128e 65537p number.getPrime(size)q number.getPrime(size)n p*q​m libnum.s2n(flag)c pow(m, e, n)​print(n %d % n)print(c %d % c)​​2.n…
阅读更多...
【csp-j学习完C++语法后，如何进阶学习C++算法和数据结构？】

【csp-j学习完C++语法后，如何进阶学习C++算法和数据结构？】

在掌握了 CSP - J 的 C 语法基础后&#xff0c;接下来的进阶学习需要系统地掌握各类算法和数据结构知识&#xff0c;并通过大量练习来巩固和提高应用能力。以下是一份详细的进阶学习规划&#xff1a; 第一阶段&#xff1a;基础算法学习&#xff08;1 - 2 个月&#xff09; 排…
阅读更多...
QT中解决使用QCustomplot绘制高速大量数据时频谱图卡顿问题

QT中解决使用QCustomplot绘制高速大量数据时频谱图卡顿问题

[&#xff01;&#xff01;&#xff01;核心方法&#xff01;&#xff01;&#xff01;] 使用带参数的replot()函数绘制m_pCustomPlot>replot(QCustomPlot::rpQueuedReplot) 1. replot() 方法 void QCustomPlot::replot(QCustomPlot::RefreshPriority refreshPriority rp…
阅读更多...
【AI】卷积神经网络CNN

【AI】卷积神经网络CNN

不定期更新&#xff0c;建议关注收藏点赞。 目录 零碎小组件经验总结早期的CNN 零碎小组件 全连接神经网络 目前已经被替代。 每个神经元都有参与&#xff0c;但由于数据中的特征点变化大&#xff0c;全连接神经网络把所有数据特征都学习了&#xff0c;故效果不好。感受野&…
阅读更多...
微信小程序~电器维修系统小程序

微信小程序~电器维修系统小程序

博主介绍&#xff1a;✌程序猿徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

步骤一&#xff1a; 下载基础镜像 # 配置docker DNS vi /etc/docker/daemon.json # daemon.json文件中 { "insecure-registries": ["https://swr.cn-east-317.qdrgznjszx.com"], "registry-mirrors": ["https://docker.mirrors.ustc.edu.c…
阅读更多...
Java高频面试之SE-18

Java高频面试之SE-18

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天又来了&#xff01;哈哈哈哈哈嗝&#x1f436; BIO NIO AIO的区别&#xff1f; 在 Java 网络编程中&#xff0c;BIO、NIO 和 AIO 是三种不同的 I/O 模型&#xff0c;它们的核心区别在于 阻塞…
阅读更多...
蓝桥杯刷题DAY3：Horner 法则 前缀和+差分数组 贪心

蓝桥杯刷题DAY3：Horner 法则 前缀和+差分数组 贪心

所谓刷题&#xff0c;最重要的就是细心 &#x1f4cc; 题目描述 在 X 进制 中&#xff0c;每一数位的进制不固定。例如&#xff1a; 最低位 采用 2 进制&#xff0c;第二位 采用 10 进制&#xff0c;第三位 采用 8 进制&#xff0c; 则 X 进制数 321 的十进制值为&#xff…
阅读更多...
BUU24 [GXYCTF2019]BabyUpload 1

BUU24 [GXYCTF2019]BabyUpload 1

开局上传文件 上传muma.php 上传.htaccess文件也被打回 再次求助互联网&#xff0c;才发现这提示给的多么明显&#xff0c;上传.htaccess文件是检查文件类型&#xff08;Contnet-Type&#xff09;&#xff0c;上传muma.php是检查后缀里头有没有ph &#xff0c;检查文件类型那…
阅读更多...
RabbitMQ 从入门到精通：从工作模式到集群部署实战（三）

RabbitMQ 从入门到精通：从工作模式到集群部署实战（三）

文章目录 使用CLI管理RabbitMQrabbitmqctlrabbitmq-queuesrabbitmq-diagnosticsrabbitmq-pluginsrabbitmq-streamsrabbitmq-upgraderabbitmqadmin 使用CLI管理RabbitMQ RabbitMQ CLI 工具需要安装兼容的 Erlang/OTP版本。 这些工具假定系统区域设置为 UTF-8&#xff08;例如en…
阅读更多...
3.攻防世界 weak_auth

3.攻防世界 weak_auth

题目描述提示 是一个登录界面&#xff0c;需要密码登录 进入题目页面如下 弱口令密码爆破 用1 or 1 #试试 提示用admin登录 则尝试 用户名admin密码&#xff1a;123456 直接得到flag 常用弱口令密码&#xff08;可复制&#xff09; 用户名 admin admin-- admin or -- admin…
阅读更多...
优化深度神经网络

优化深度神经网络

训练集、开发集(验证集)、测试集 偏差与方差 正则化 L2正则 Dropout 随机丢弃部分神经元输入&#xff0c;经常用于计算机视觉的神经网络内&#xff0c;因为通常没有足够的训练数据&#xff0c;很容易出现过拟合的问题 数据增强 训练集规一化 可以使其图像更均匀&#xff0c;…
阅读更多...
【玩转 Postman 接口测试与开发2_018】第14章：利用 Postman 初探 API 安全测试

【玩转 Postman 接口测试与开发2_018】第14章：利用 Postman 初探 API 安全测试

《API Testing and Development with Postman》最新第二版封面 文章目录 第十四章 API 安全测试1 OWASP API 安全清单1.1 相关背景1.2 OWASP API 安全清单1.3 认证与授权1.4 破防的对象级授权&#xff08;Broken object-level authorization&#xff09;1.5 破防的属性级授权&a…
阅读更多...
Spring @PropertySource：让你的应用配置更加模块化和可维护

Spring @PropertySource：让你的应用配置更加模块化和可维护

PropertySource注解在Spring中的作用&#xff0c;就像是给Spring应用配了一个“外部配置箱”。 想象一下&#xff0c;你在开发一个Spring应用时&#xff0c;有很多配置信息需要设置&#xff0c;比如数据库的连接信息、应用的某些功能开关等。如果这些信息都硬编码在代码中&…
阅读更多...
RK3576——USB3.2 OTG无法识别到USB设备

RK3576——USB3.2 OTG无法识别到USB设备

问题&#xff1a;使用硬盘接入到OTG接口无热插拔信息&#xff0c;接入DP显示屏无法正常识别到显示设备&#xff0c;但是能通过RKDdevTool工具烧录系统。 问题分析&#xff1a;由于热插拔功能实现是靠HUSB311芯片完成的&#xff0c;因此需要先确保HUSB311芯片驱动正常工作。 1. …
阅读更多...
docker-compose 配置nginx

docker-compose 配置nginx

前言 前端打包的dist文件在宿主机&#xff0c;nginx运行在docker-compose 问题 nginx.conf 在本地配置可以生效&#xff0c;但是链接到容器就报错 基于本地的nginx运行&#xff0c;本地nginx.conf 如下 server {listen 8081;location / {root /usr/local/software/testweb/…
阅读更多...
基于SpringBoot+ Vue的家教管理系统

基于SpringBoot+ Vue的家教管理系统

随着互联网技术的发展&#xff0c;信息化管理已经深入到各个行业中。在教育领域&#xff0c;家教管理系统的需求日益增长。传统的手工管理方式在面对大量信息时&#xff0c;容易出现管理效率低下、数据错误率高、修改困难等问题。本文将介绍基于Spring Boot框架、MySQL数据库开…
阅读更多...
【数据结构】树哈希

【数据结构】树哈希

目录 一、树的同构1. 定义2. 具体理解(1) 结点对应(2) 孩子相同(3) 递归性质 3. 示例 二、树哈希1.定义2.哈希过程&#xff08;1&#xff09;叶节点哈希&#xff08;2&#xff09;非叶节点哈希&#xff08;3&#xff09;组合哈希值 3.性质&#xff08;1&#xff09; 唯一性 \re…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023