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

CSS复合选择器（二）

news 2025/9/7 2:42:11

CSS复合选择器（二）

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

伪类选择器

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

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

常用的伪类选择器：

一、动态伪类：

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

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

: 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>

二、结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于n的值：

0或不写：什么都选不中 —— 几乎不用。
n：选中所有子元素 —— 几乎不用。
1~正无穷的整数：选中对应序号的子元素。
2n 或 even ：选中序号为偶数的子元素。
2 n+1 或 odd ：选中序号为奇数的子元素。
-n+3 ：选中的是前3个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
: root 根元素。
: 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伪类：

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
: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复合选择器（二） 伪类选择器一、动态伪类：二、结构伪类三、否定伪类：四、UI伪类：五、目标伪类（了解）六、语言伪类（了解） 伪类选择器作用：选中特殊状态的元…...

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

Postgresql中VACUUM操作原理和应用

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

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

5.1 Ajax数据爬取之初介绍

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

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

react-组件进阶

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

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

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

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

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

P1331 海战

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

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

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

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

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

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

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

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

代码随想录 Leetcode494. 目标和

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

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

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

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

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

代码库管理工具Git介绍

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

编程日记 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界面+训练代码）

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

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

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

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

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

C#进阶——反射、特性

反射特性...

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

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

一.相关蓝图的练习，在我之前的文章中射击子弹案例-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日，美国世贸大楼被袭击，美国国防部第一次将“主动预警”纳入国防的宏观战略规划。而IBM作为当时全球最大的IT公司，承担了大量基础支撑软件研发的任务。其中2009年正式发布的IBM InfoSphere Streams，就是…...

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

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

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

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

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

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

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/9/4 8:47:06

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/8/25 16:43:44

Rust 异步编程

Rust 异步编程引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。异步编程基础什么是异步…...

编程新知 2025/8/8 11:04:42

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/8/12 19:32:55

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/8/20 11:30:50

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/9/2 17:48:51