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

CSS复合选择器（二）

news 2026/1/24 7:09:19

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/1/23 3:03:42

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/15 0:04:01

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/14 19:06:08

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/15 8:43:44

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/1/22 6:05:55

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/1/21 14:15:23

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/1/19 18:53:51