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

CSS_复合选择器

news 2025/11/12 15:55:30

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

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/11/8 5:57:07

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/11/8 3:29:27

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/9/30 12:05:28

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2025/11/12 15:22:23

基于Springboot+Vue的办公管理系统

角色： 管理员、员工技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...

编程新知 2025/11/10 0:50:30