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

CSS复合选择器（二）

news 2026/2/9 5:38:25

CSS复合选择器（二）

    • 伪类选择器
      • 一、动态伪类：
      • 二、结构伪类
      • 三、否定伪类：
      • 四、UI伪类：
      • 五、目标伪类（了解）
      • 六、语言伪类（了解）

伪类选择器

  • 作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

  • 常用的伪类选择器：

一、动态伪类：

  1. : link 超链接未被访问的状态。
  2. :visited 超链接访问过的状态。
  3. : hover 鼠标悬停在元素上的状态。
  4. :active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。
注意点：遵循LVHA 的顺序，即：link 、visited 、hover 、active 。

  1. : focus 获取焦点的元素。

表单类元素才能使用:focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的 “tab ” 键等方式，选择元素时，就是获得焦点。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_动态伪类</title><style>/* 选中的是没有访问过的a元素 */a:link {color: orange;}/* 选中的是访问过的a元素 */a:visited {color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover {color: skyblue;}/* 选中的是激活状态的a元素 */a:active {color: green;}/* 选中的是鼠标悬浮的span元素 */span:hover {color: green;}/* 选中的是激活的span元素 */span:active {color: red;}/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */input:focus,select:focus {color: orange;background-color: green;}</style>
</head>
<body><a href="https://www.baidu.com">去百度</a><a href="https://www.jd.com">去京东</a><span>前端</span><br><input type="text"><br><input type="text"><br><input type="text"><select><option value="beijing">北京</option><option value="shanghai">上海</option></select>
</body>
</html>

二、结构伪类

  • 常用的：
  1. :first-child 所有兄弟元素中的第一个。
  2. :last-child 所有兄弟元素中的最后一个。
  3. :nth-child(n) 所有兄弟元素中的第 n 个。
  4. :first-of-type 所有同类型兄弟元素中的第一个。
  5. :last-of-type 所有同类型兄弟元素中的最后一个。
  6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于n的值：

  1. 0或不写：什么都选不中 —— 几乎不用。
  2. n：选中所有子元素 —— 几乎不用。
  3. 1~正无穷的整数 ：选中对应序号的子元素。
  4. 2n 或 even ：选中序号为偶数的子元素。
  5. 2 n+1 或 odd ：选中序号为奇数的子元素。
  6. -n+3 ：选中的是前3个。
  • 了解即可：
  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
  3. :only-child 选择没有兄弟的元素（独生子女）。
  4. :only-of-type 选择没有同类型兄弟的元素。
  5. : root 根元素。
  6. : empty 内容为空元素（空格也算内容）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_1</title><style>/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构1 *//* div>p:first-child {color: red;} *//* 选中的是div的第一个儿子p元素（按照所有兄弟计算的） —— 看结构2 *//* div>p:first-child {color: red;} *//* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 *//* div p:first-child {color: red;} *//* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */p:first-child {color: red;}</style>
</head>
<body><!-- 结构1 --><!-- <div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div> --><!-- 结构2 --><!-- <div><span>张三：98分</span><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div> --><!-- 结构3 --><p>测试1</p><div><p>测试2</p><marquee><p>测试3</p><p>张三：98分</p></marquee><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_2</title><style>/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）—— 结构1*//* div>p:first-child {color: red;} *//* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的）—— 结构1*//* div>p:last-child {color: red;} *//* 选中的是div的第n个儿子p元素（按照所有兄弟计算的）—— 结构1 *//* div>p:nth-child(3) {color: red;} *//* 选中的是div的偶数个儿子p元素（按照所有兄弟计算的）—— 结构2 *//* 关于n的值 —— 结构2：1. 0或不写：什么都选不中 —— 几乎不用。2. n ：选中所有子元素  —— 几乎不用。3. 1 ~ 正无穷的整数，选中对应序号的子元素。4. 2n 或 even  ：选中序号为偶数的子元素。5. 2n+1 或 odd ：选中序号为奇数的子元素。6. -n+3 : 选中前三个。*//* div>p:nth-child(2n) {color: red;} *//* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:first-of-type{color: red;} *//* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:last-of-type{color: red;} *//* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）—— 结构3 *//* div>p:nth-of-type(5) {color: red;} */</style>
</head>
<body><!-- 结构1 --><!-- <div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p></div> --><!-- 结构2 --><!-- <div><p>第1个</p><p>第2个</p><p>第3个</p><p>第4个</p><p>第5个</p><p>第6个</p><p>第7个</p><p>第8个</p><p>第9个</p><p>第10个</p></div> --><!-- 结构3 --><!-- <div><span>测试1</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><span>测试2</span><p>赵六：68分</p><span>测试3</span><p>孙七：58分</p><span>测试4</span><p>老八：48分</p><span>测试5</span></div> -->
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_结构伪类_3</title><style>/* 选中div中倒数第n个的儿子p元素（按照所有兄弟）—— 看结构1 *//* div>p:nth-last-child(3) {color: red;} *//* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟）—— 看结构1 *//* div>p:nth-last-of-type(2) {color: red;} *//* 选中的是没有兄弟的span元素 —— 看结构2 *//* span:only-child {color: red;} *//* 选中的是没有同类型兄弟的span元素 —— 看结构2 *//* span:only-of-type {color: red;} *//* 选中的是根元素 *//* :root {background-color: gray;} *//* 选中的是没有内容的div元素 *//* div:empty {width: 100px;height: 100px;background-color: red;} */</style>
</head>
<body><!-- 结构1 --><!-- <div><span>测试1</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p><span>测试2</span></div> --><!-- 结构2 --><!-- <div><span>测试1</span></div><div><span>测试2</span><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p>孙七：58分</p><p>老八：48分</p></div> --><!-- 结构3 --><div> </div>
</body>
</html>

三、否定伪类：

:not(选择器) 排除满足括号中条件的元素。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_否定伪类</title><style>/* 选中的是div的儿子p元素，但是排除类名为fail的元素 *//* div>p:not(.fail) {color: red;} *//* 选中的是div的儿子p元素，但是排除title属性值以“你要加油”开头的 *//* div>p:not([title^="你要加油"]) {color: red;} *//* 选中的是div的儿子p元素，但排除第一个儿子p元素 */div>p:not(:first-child) {color: red;}</style>
</head>
<body><div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p class="fail" title="你要加油啊！孙七">孙七：58分</p><p class="fail" title="你要加油啊！老八">老八：48分</p></div>
</body>
</html>

四、UI伪类：

  1. :checked 被选中的复选框或单选按钮。
  2. :enable 可用的表单元素（没有 disabled 属性）。
  3. :disabled 不可用的表单元素（有disabled 属性）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_UI伪类</title><style>/* 选中的是勾选的复选框或单选按钮 */input:checked {width: 100px;height: 100px;}/* 选中的是被禁用的input元素 */input:disabled {background-color: gray;}/* 选中的是可用的input元素 */input:enabled {background-color: green;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="text"><input type="text" disabled>
</body>
</html>

五、目标伪类（了解）

:target 选中锚点指向的元素。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_目标伪类</title><style>div {background-color: gray;height: 300px;}div:target {background-color: green;}</style>
</head>
<body><a href="#one">去看第1个</a><a href="#two">去看第2个</a><a href="#three">去看第3个</a><a href="#four">去看第4个</a><a href="#five">去看第5个</a><a href="#six">去看第6个</a><div id="one">第1个</div><br><div id="two">第2个</div><br><div id="three">第3个</div><br><div id="four">第4个</div><br><div id="five">第5个</div><br><div id="six">第6个</div>
</body>
</html>

六、语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看lang 属性的值）。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器_语言伪类</title><style>div:lang(en) {color: red;}:lang(zh-CN) {color: green;}</style>
</head>
<body><div>北京</div><div lang="en">上海</div><p>前端</p><span>你好</span>
</body>
</html>

相关文章：

CSS复合选择器（二）

CSS复合选择器&#xff08;二&#xff09; 伪类选择器一、动态伪类&#xff1a;二、结构伪类三、否定伪类&#xff1a;四、UI伪类&#xff1a;五、目标伪类&#xff08;了解&#xff09;六、语言伪类&#xff08;了解&#xff09; 伪类选择器 作用&#xff1a;选中特殊状态的元…...

编程日记 2024/2/29 23:39:28

Postgresql中VACUUM操作原理和应用

VACUUM操作在PostgreSQL中的底层原理涉及几个关键概念&#xff0c;包括MVCC&#xff08;多版本并发控制&#xff09;、事务ID包裹、以及垃圾回收机制。我们逐一解析这些概念&#xff0c;以及它们是如何与VACUUM操作相互作用的。 关键概念 1. MVCC&#xff08;多版本并发控制&…...

编程日记 2024/2/29 23:37:26

5.1 Ajax数据爬取之初介绍

目录 1. Ajax 数据介绍 2. Ajax 分析 2.1 Ajax 例子 2.2 Ajax 分析方法 &#xff08;1&#xff09;在网页页面右键&#xff0c;检查 &#xff08;2&#xff09;找到network&#xff0c;ctrl R刷新 &#xff08;3&#xff09;找 Ajax 数据包 &#xff08;4&#xff09;…...

编程日记 2024/2/29 23:36:25

react-组件进阶

1.目标 能够实用props接收数据 能够实现父子组件之间的通讯 能够实现兄弟组件之间的通讯 能够给组件添加props校验 能够说出生命周期常用的钩子函数 能够知道高阶组件的作用 2.目录 组件通讯介绍 组件的props 组件通讯的三种方式 Context props深入 组件的生命周期 Render-p…...

编程日记 2024/2/29 23:34:23

企业有了ERP，为什么还要上BI?

在我们以往和企业的沟通过程中&#xff0c;我们发现还是有相当多的一部分企业对于商业智能 BI 了解不多&#xff0c;或者对商业智能 BI 的理解仅停留在花花绿绿的可视化页面上&#xff0c;要么就是提出以下类似问题&#xff1a; 财务部门&#xff1a;BI 的财务分析指标也就是三…...

编程日记 2024/2/29 23:33:22

P1331 海战

难度&#xff1a;普及- 题目背景 在峰会期间&#xff0c;武装部队得处于高度戒备。警察将监视每一条大街&#xff0c;军队将保卫建筑物&#xff0c;领空将布满了 F-2003 飞机。 此外&#xff0c;巡洋船只和舰队将被派去保护海岸线。不幸的是&#xff0c;因为种种原因&#x…...

编程日记 2024/2/29 23:29:19

Orange3数据预处理(索引选择器组件)

组件描述 数据行即使在某些或全部原始变量被来自原始变量的计算变量替换时&#xff0c;也保持其身份。 此小部件获取两个数据表&#xff08;“数据”和“数据子集”&#xff09;&#xff0c;它们可以追溯到同一来源。基于行身份而非实际数据&#xff0c;它会从“数据”中选择所…...

编程日记 2024/2/29 23:27:17

Python实现时间序列分析进行平稳性检验(ADF和KPSS)和差分去趋势(adfuller和kpss算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 时间序列分析中的平稳性检验是评估一个时间序列是否具有稳定的均值和方差。在经济学、金融学以及其他诸…...

编程日记 2024/2/29 23:26:16

代码随想录 Leetcode494. 目标和

题目&#xff1a; 代码(首刷看解析 2024年2月26日&#xff09; 思路&#xff1a;根据题意&#xff0c;设两个背包&#xff0c;packageA存放前面是""的数字之和&#xff0c;packageB存放前面是“-”的数字之和 则sum packageA packageB; target packageA - packag…...

编程日记 2024/2/29 23:24:15

【5G NR】【一文读懂系列】移动通讯中使用的信道编解码技术-NR编解码LDPC和Polar概述(一)

目录 NR LDPC和Polar编码技术概述 LDPC&#xff08;低密度奇偶校验码&#xff09; LDPC 工作原理 LDPC 应用场景&#xff1a; LDPC 与其他编码技术相比的优势&#xff1a; Polar 极化码 Polar 工作原理 Polar 应用场景&#xff1a; Polar 与其他编码技术相比的优势&am…...

编程日记 2024/2/29 23:22:13

代码库管理工具Git介绍

阅读本文同时请参阅-----免费的Git图形界面工具sourceTree介绍 Git是一个分布式版本控制系统&#xff0c;它可以帮助开发者跟踪和管理代码历史。Git的命令行工具是使用Git的核心方式&#xff0c;虽然它可能看起来有些复杂&#xff0c;但是一旦掌握了基本命令&#xff0c;你…...

编程日记 2024/2/29 23:20:11

【长期更新】游戏开发中可能会用到的数学小工具

从一个向量生成一组正交基 https://graphics.pixar.com/library/OrthonormalB/paper.pdf...

编程日记 2024/2/29 23:14:06

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的活体人脸检测系统（Python+PySide6界面+训练代码）

摘要&#xff1a;本篇博客详细讲述了如何利用深度学习构建一个活体人脸检测系统&#xff0c;并且提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并进行了与前代算法YOLOv7、YOLOv6、YOLOv5的细致对比&#xff0c;展示了其在图像、视频、实时视频流和批量文件处…...

编程日记 2024/2/29 23:12:04

亚信安慧AntDB助力全链路实时化

实时数据平台&#xff0c;快速实现企业全链路实时化 引入数据仓库、数据挖掘、HTAP等先进理念&#xff0c;通过实时数据应用平台来装载庞大的信息量&#xff0c;进行实时分析处理&#xff0c;克服数据处理过程中的困难&#xff0c;是当下各企事业单位、互联网、金融&#xff0c…...

编程日记 2024/2/29 23:10:02

C#进阶——反射、特性

反射 特性...

编程日记 2024/2/29 23:08:00

UE5 C++ 发射子弹发射（Projectile）

一.相关蓝图的练习&#xff0c;在我之前的文章中射击子弹案例-CSDN博客 本篇使用C实现 1.创建C类 MyBullet,在MyBullet.h中包含相关头文件 #include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "Components/StaticMeshComponent.…...

编程日记 2024/2/29 23:07:00

【蓝牙协议栈】【蓝牙分析工具】Ellisys 分析HCI Log和btsnoop Log

1.Ellisys 介绍 Ellisys 的 air log sniffer设备要二三十万，一般不是专业开发蓝牙的估计不会选择使用这个工具，但是即使我们不买这个设备，安装了 Ellisys 的工具也可以看 btsnoop 的，下面我就一步一步教你通过 Ellisys 来打开 btsnoop。 1.1 首先打开 APP(Ellisys 不能直…...

编程日记 2024/2/29 23:00:54

亚信安慧AntDB数据库与流式处理的有机融合

流式处理的概念 2001年9月11日&#xff0c;美国世贸大楼被袭击&#xff0c;美国国防部第一次将“主动预警”纳入国防的宏观战略规划。而IBM作为当时全球最大的IT公司&#xff0c;承担了大量基础支撑软件研发的任务。其中2009年正式发布的IBM InfoSphere Streams&#xff0c;就是…...

编程日记 2024/2/29 22:58:52

神经网络系列---权重初始化方法

文章目录 权重初始化方法Xavier初始化&#xff08;Xavier initialization&#xff09;Kaiming初始化&#xff0c;也称为He初始化LeCun 初始化正态分布与均匀分布Orthogonal InitializationSparse Initializationn_in和n_out代码实现 权重初始化方法 Xavier初始化&#xff08;X…...

编程日记 2024/2/29 22:56:50

【重要公告】BSV区块链协会宣布将启动多项动态安全增强措施

​​发表时间&#xff1a;2024年2月16日 2024年2月16日&#xff0c;瑞士楚格 - BSV区块链协议的管理机构BSV区块链协会&#xff08;以下简称“BSV协会”&#xff09;宣布对其运营模式实施全新的安全架构&#xff0c;其中包括引入网络访问规则和数字资产找回协议&#xff0c;以及…...

编程日记 2024/2/29 22:53:48

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2026/1/26 9:07:56

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43