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

CSS_复合选择器

news 2025/7/28 1:06:03

7. 复合选择器

7.1 交集选择器

7.2 并集选择器

7.3 后代选择器

7.4 子代选择器

7.5 兄弟选择器

7.6 属性选择器

7.7 伪类选择器

7.7.1动态伪类

7.7.2结构伪类

7.7.3否定伪类

7.7.4 UI伪类

7.7.5 目标选择器

7. 复合选择器

7.1 交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即……又……的意思，例如：年轻且美丽）

语法：选择器1选择器2选择器3…选择器n{}

举例：

p.beauty{color: blue;}

注意点：

有标签名，标签名必须卸载前面。
id选择器，理论上可以作为交集的条件，但在实际应用中几乎不用——没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不能即是p元素又是span元素。
用的最多的交集选择器：元素选择器配合类名选择器，例如：p.beauty。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>.beijing {color: gold;}.beauty {color: red;}p.beauty{color: blue;}/* p.beauty#ls{color: aqua;} 一般不用这种形式id可以直接定位*//* #ls{color: aquamarine;} */</style>
</head>
<body><h2 class="beijing">北京大学</h2><h2 class="qinghua">清华大学</h2><hr><p class="beauty" id="ls">李四</p><p class="beauty">张三</p>
</body>
</html>

7.2 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

语法：选择器1，选择器2，选择器3…选择器n{}

选择器之间+，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>.beijing {color: gold;}.beauty {color: red;}.beauty,.beijing{font-size: 50px;background: gray;width: 200px;}</style>
</head>
<body><h2 class="beijing">北京大学</h2><h2 class="qinghua">清华大学</h2><hr><p class="beauty" id="ls">李四</p><p class="beauty">张三</p>
</body>
</html>

7.3 后代选择器

作用：选中指定元素中，复合要求的后代元素。

语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开。

/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>ul li{color: blue;}ol li{color: aquamarine;}ul li a{color: brown;}.suject li{color: seagreen;}</style>
</head>
<body><!-- 无序 --><ul><li>美甲</li><li>电视剧</li><li><a href="#">剪头</a></li><div><li>打篮球</li></div></ul><!-- 有序 --><hr><ol><li>小李</li><li>小王</li><li>小刘</li></ol><ol class="suject"><li>数据结构</li><li>大物</li><li>高数</li></ol>
</body>
</html>

7.4 子代选择器

语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子代选择器</title><style>div>a{color: aquamarine;}div>p>a{color: blue;}</style>
</head>
<body><div><a href="#">李四</a><a href="#">王五</a><p><a href="#">张三</a></p></div>
</body>
</html>

注意：

1. 子代选择器，最终选择的是子代，不是父级。

2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

7.5 兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

语法：选择器1+选择器2 {} 。

div+p{color: brown;}

通用兄弟选择器：

作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

语法：选择器1~选择器2 {} 。

实例：

div~p{color: brown;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兄弟选择器</title><style>/* 与div紧紧相邻的兄弟p元素（在div下面） */div+p{color: brown;}/* 与div后所有的兄弟p元素（在div下面） */div~p{color: brown;}</style>
</head>
<body><p>广州</p><div>大学</div><p>上海</p><p>北京</p>
</body>
</html>

注意：两种兄弟选择器，选择的是下面的兄弟。

7.6 属性选择器

作用：选中属性值符合一定要求的元素。

语法：

[属性名] 选中具有某个属性的元素。
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}
/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}
/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

7.7 伪类选择器

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

如何理解“伪” ? — 虚假的，不是真的。

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

7.7.1动态伪类

:link 超链接未被访问的状态。

:visited 超链接访问过的状态。

:hover 鼠标悬停在元素上的状态。

:active 元素激活的状态。

:focus 获取焦点的元素。

link和visited是a标签独有的属性，active和hover是使用元素都具有

什么是激活？—— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获

得焦点。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态</title><style>/* 选中的是没有访问过的a元素 */a:link{color: orange;}/* 选中的是访问过的a元素 */a:visited{color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover{color: skyblue;}/* 选中的是鼠标点击激活状态的a元素 */a:active{color: greenyellow;}/*  */input:focus {background-color: green;}</style>
</head>
<body><a href="https://www.baidu.com" target="_blank">baidu</a><a href="https://www.jingdong.com">jingdong</a><br><input type="text" name="" id="">
</body>

7.7.2结构伪类

常用的：

: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 ：选中序号为偶数的子元素。

2n+1 或 odd ：选中序号为奇数的子元素。

-n+3 ：选中的是前 3 个。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类</title><style>/* 选中div的第一个儿子p元素 结构1*//* div>p:first-child{color: #de3939;} *//* 选中div的第一个儿子p元素 结构2*/div>p:first-child {color: #341dc9;}/* 选中div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/div p:first-child {color: #0dc62f;}/* 选中div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/p:first-child {color: #0dc62f;}/* 选中div的第n个儿子p元素（按照所以儿子计算） */div>p:nth-child(3) {color: brown;}div>p:nth-child(2n+1) {color: rgb(65, 42, 165);}/* 所有同类型兄弟元素中的第一个 */div>p:first-of-type{color: rgb(5, 96, 66);}/* 所有同类型兄弟元素中的最后一个 */div>p:last-of-type{color: rgb(5, 96, 66);}/* 所有同类型兄弟元素中的 第n个（按照所有同类型兄弟计算） */div>p:nth-of-type(3){color: blue;}</style>
</head><body><!-- 结构1 --><!-- <div><p>张三：100</p><p>李四：99</p><p>王五：98</p><p>刘：97</p></div> --><!-- 结构2 --><!-- <div><span>张三：100</span><p>李四：99</p><p>王五：98</p><p>刘：97</p></div> --><!-- 结构3 --><p>测试1</p><div><p>测试2</p><marquee><p>测试3</p><p>张三：100</p></marquee><p>李四：99</p><p>王五：98</p><p>刘：97</p></div>
</body>
</html>

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第**n个** 。

:only-child 选择没有兄弟的元素（独生子女）。

:only-of-type 选择没有同类型兄弟的元素。

:root 根元素。

:empty 内容为空元素（空格也算内容）。

7.7.3否定伪类

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>否定伪类</title><style>/* 选中的是div的儿子p元素，排除类名为fail的元素 */div>p:not(.fail){color: red;}/* 选中的是div的儿子p元素，排除title属性为加油的元素 */div>p:not([title^="加油"]){color: blue;}/* 选中的是div的儿子p元素，排除第一个儿子p元素*/div>p:not(:first-child){color: aqua;}</style>
</head>
<body><div><p>张三：100</p><p>李四：99</p><p>王五：98</p><p>刘：97</p><p class="fail" title="加油">孙七：59</p><p class="fail">李八：40</p></div>
</body>
</html>

7.7.4 UI伪类

:checked 被选中的复选框或单选按钮。

:enable 可用的表单元素（没有 disabled 属性）。

:disabled 不可用的表单元素（有 disabled 属性）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI伪类</title><style>/* 选中的是勾选的复选框  :checked 被选中的复选框或单选按钮。*/input:checked{width: 100px;height: 100px;}/* 选中的是被禁用的input元素 */input:disabled{background-color: aquamarine;}/* 选中的是可用的input元素 */input:enabled{background-color: black;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender" id=""><input type="radio" name="gender" id=""><input type="text"><input type="text" disabled>
</body>
</html>

7.7.5 目标选择器

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI伪类</title><style>div{background-color: bisque;height: 400px;}div:target{background-color: black;}</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><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>
</html>

CSS_复合选择器

目录 7. 复合选择器 7.1 交集选择器 7.2 并集选择器 7.3 后代选择器 7.4 子代选择器 7.5 兄弟选择器 7.6 属性选择器 7.7 伪类选择器 7.7.1动态伪类 7.7.2结构伪类 7.7.3否定伪类 7.7.4 UI伪类 7.7.5 目标选择器 7. 复合选择器 7.1 交集选择器作用：…...

编程日记 2025/3/4 8:52:53

测试工程师Ai应用实战指南简例prompt

以下是一个真实具体的案例，展示测试工程师如何在不同阶段结合DeepSeek提升效率。案例基于电商平台"订单超时自动关闭"功能测试：案例背景项目名称：电商平台订单系统V2.3 测试目标：验证"用户下单后30分钟未支付，订单自动关闭并释放库存"功能技术栈：…...

编程日记 2025/3/4 8:51:52

贪心人生，贪心算法

引言贪心算法（Greedy Algorithm）是一种在每一步选择中都采取当前状态下最优（或最有利）的选择，从而希望导致全局最优解的算法。贪心算法的核心思想是局部最优解能够导致全局最优解。贪心算法通常用于解决最优化问题…...

编程日记 2025/3/4 8:50:50

【论文阅读笔记】用于恶劣天气条件下的目标检测的IA-YOLO(Image-Adaptive YOLO) | 适合雾天和低光照场景

目录摘要 1 方法 ■ DIP模块 ▲像素级滤波器 ▲锐化滤波器 ▲去雾滤波器 ■ CNN-PP Module ■ 检测网络模块 ■ 混合数据训练 2 实验 ■ 实现细节 ■ 有雾图像上的实验 ■ 低照度图像上的实验 ■ 消融研究 ■ 有效分析结论论文题目：Image-Adapti…...

编程日记 2025/3/4 8:48:45

【Elasticsearch】Set up a data stream 创建data stream

在 Elasticsearch 中，数据流（Data Stream）是一种用于管理时间序列数据的高级功能，它通过自动管理索引的生命周期和版本控制，简化了大规模时间序列数据的存储和查询。以下是结合上述翻译内容，对 Elasticsear…...

编程日记 2025/3/4 8:46:43

redhat无网利用iso搭建本地yum源

redhat8 挂载iso镜像到本地目录第一种方法： 上传rhel8的iso文件到服务器。 mkdir /mnt/cdrom mount -t iso9660 -o loop rhel-8.10-x86_64-dvd.iso /mnt/cdrom 第二种方法： 如果是vmware等自己安装的虚拟机，可以直接挂载iso镜像到cd/dvd…...

编程日记 2025/3/4 8:45:42

我的ChatGPT怎么登不上？

近期，不少用户反馈在使用ChatGPT时遇到登录困难、连接超时等问题。本文将从技术角度分析常见原因，并提供合规、安全的解决方案，同时结合开发者实际需求推荐实用工具，助您高效应对登录障碍。 ChatGPT登录失败的常见原因网络环境限…...

编程日记 2025/3/4 8:44:39

-- 迷你世界飞机大战 v1.2 -- 星空露珠工作室制作 -- 最后更新：2024年1月 ----------------------------- -- 迷你世界API适配配置 ----------------------------- local UI { BASE_ID 7477478487091949474-22856, -- UI界面ID ELEMENTS { BG 1, -- 背景 BTN_LE…...

编程日记 2025/3/4 8:43:37

链表常用技巧和操作总结

链表是我们数据结构很重要的一点,也是常考的点接下来我会先进行技巧总结,然后再通过具体的题来进行详解总结 1.常用技巧画图: 用笔是肯定比只用脑子强的,画图会更加清晰引入虚拟头节点: 便于处理边界: 如果没有头节点,也就是第一个节点就有有效数据,就需要考虑边界问题…...

编程日记 2025/3/4 8:42:36

CSS的列表属性

列表相关属性,可以用在ul,ol,li元素上. CSS属性名功能属性值 list-style-type 设置列表符号常用值如下: none:不显示前面的标识(很常用!) square:实心方块 disc:圆形 decimal:数字 lower-roma:小写罗马字 upper-roman:大写罗马字 lower-alph:小写字母 upper-alpha:大写字母 …...

编程日记 2025/3/4 8:41:35

Django 5实用指南（十三）安全性与防护

随着Web应用的普及，安全性问题越来越成为开发者关注的重点。Django5为Web开发者提供了强大的安全防护功能，可以帮助开发者防范常见的Web攻击，如SQL注入、跨站脚本攻击（XSS）、跨站请求伪造（CSRF）…...

编程日记 2025/3/4 8:40:33

cesium+vue3自定义HTML实体弹窗、加高德路网、防实体漂浮、让用户画圆、鹰眼

一、基础使用：Cesium.js基础使用（vue）-CSDN博客 1、基础路径为 Cesium 库设置一个全局变量 CESIUM_BASE_URL，用于指定 Cesium 的资源文件（如 WebGL shaders、纹理、字体等）的示例场景：假设你…...

编程日记 2025/3/4 8:39:32

Go红队开发—编解码工具

文章目录开启一个项目编解码工具开发Dongle包Base64编解码摩斯密码URL加解密AES加解密 MD5碰撞工具开发开启一个项目这作为补充内容，可忽略直接看下面的编解码： 一开始用就按照下面的步骤即可 1.创建一个文件夹，你自己定义名字(建议只用…...

编程日记 2025/3/4 8:35:28

计算机毕业设计SpringBoot+Vue.js常规应急物资管理系统(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/3/4 8:32:25

thinkphp5对接阿里云ocr试卷切题

thinkphp5对接阿里云ocr试卷切题提示：切题使用的是api:RecognizeEduPaperCut 以下是基于 ThinkPHP5.14 框架调用阿里云 RecognizeEduPaperCut 接口的详细实现步骤和代码示例。文章目录 thinkphp5对接阿里云ocr试卷切题前言1、前置准备2、配置文件3、控制器直接引…...

编程日记 2025/3/4 8:30:23

AI数据分析：用DeepSeek做数据清洗

在当今数据驱动的时代，数据分析已成为企业和个人决策的重要工具。随着人工智能技术的快速发展，AI 驱动的数据分析工具正在改变我们处理和分析数据的方式。本文将着重介绍如何使用 DeepSeek 进行数据清洗。数据清洗是数据分析的基础，其目的是…...

编程日记 2025/3/4 8:29:22

免费轻巧多功能 PDF 处理工具：转换、压缩、提取一应俱全

软件技术今天要给大家分享一款超实用的 PDF 处理工具，它免费又轻巧，如同随时待命的得力小帮手，功能之强大超乎想象，真的值得大家收藏。这款工具是绿色版软件，解压后开启，满满的 PDF 处理功能便映入眼帘…...

编程日记 2025/3/4 8:22:12

基于JavaWeb开发的Java+SpringBoot+vue+element实现物流管理系统

基于JavaWeb开发的JavaSpringBootvueelement实现物流管理系统 🍅 作者主页网顺技术团队 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 文末获取源码联系方式 📝 🍅 查看下方微信号获取联系方式承接各种定…...

编程日记 2025/3/4 8:19:09

计算机毕业设计SpringBoot+Vue.js华强北商城二手手机管理系统 (源码+文档+PPT+讲解)

编程日记 2025/3/4 8:18:07

实验：k8s+keepalived+nginx+iptables

1、创建两个nginx的pod，app都是nginx nginx1 nginx2 2、创建两个的pod的service 3、配置两台keepalived的调度器和nginx七层反向代理，VIP设置192.168.254.110 keepalived调度器master keepalived调度器backup 两台调度器都配置nginx七层反向代理&#…...

编程日记 2025/3/4 8:15:03

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/7/8 9:04:09

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/7/9 14:34:03

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/7/25 5:31:11

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...

编程新知 2025/7/21 1:25:48

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/7/26 15:41:36

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/7/27 17:59:17