深入浅出CSS复合选择器：掌控元素关系与层级选择

目录

前言

一、子代选择器（Descendant Selector）

1. 什么是子代选择器？

2. 基本语法

3. 示例

4. 注意事项

二、直接子元素选择器（Child Selector）

1. 什么是直接子元素选择器？

2. 基本语法

3. 示例

4. 注意事项

三、相邻兄弟选择器（Adjacent Sibling Selector）

1. 什么是相邻兄弟选择器？

2. 基本语法

3. 示例

4. 注意事项

四、通用兄弟选择器（General Sibling Selector）

1. 什么是通用兄弟选择器？

2. 基本语法

3. 示例

4. 注意事项

五、并集选择器（Union Selector）

1. 什么是并集选择器？

2. 基本语法

3. 示例

4. 注意事项

六、交集选择器（Intersection Selector）

1. 什么是交集选择器？

2. 基本语法

3. 示例

4. 注意事项

七、总结

前言

        在Web开发中，CSS选择器是用来为HTML元素应用样式的关键工具。常规的选择器如类选择器、ID选择器、标签选择器等虽然能处理一些基本的样式应用，但在复杂页面中，元素之间的关系和层级结构常常要求使用更加灵活的复合选择器。复合选择器可以让你更精确地指定哪些元素需要应用样式。

在本篇博客中，我们将深入探讨几种常用的复合选择器，如：子代选择器、兄弟选择器、并集选择器、交集选择器等。

一、子代选择器（Descendant Selector）

1. 什么是子代选择器？

子代选择器是用于选取某个元素内部的所有后代元素。后代可以是该元素的直接子元素，也可以是更深层次的子元素。子代选择器的语法非常简单：两个元素之间使用空格隔开。

2. 基本语法

父元素 子元素 {属性: 值;
}

3. 示例

<div class="container"><p>这是一段文本</p><span>这是一段被span包裹的文本</span>
</div>

.container p {color: red;
}

在这个例子中，.container p表示所有.container类内的p标签，包括直接子元素和更深层次的子元素，都会应用红色字体。

4. 注意事项

  • 子代选择器的优先级较低，因为它匹配的是所有后代元素，而不只限于直接子元素。
  • 使用子代选择器时要小心性能问题，尤其是在DOM结构较复杂时，子代选择器可能会导致浏览器需要遍历多个嵌套层次，影响渲染速度。
<!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: red;}ol li{color: blue;}ol li a{color: aquamarine;}li.vi a{color: chocolate;}</style>
</head>
<body><ul><li>苹果</li><li><ul><li>红富士</li><li>红心</li></ul></li></ul><ol><li>华为</li><li><a href="">华为手机</a></li><li>小米</li><li class="vi"><a href="">小米手机</a></li></ol>
</body>
</html>

 

二、直接子元素选择器（Child Selector）

1. 什么是直接子元素选择器？

直接子元素选择器（>）用于选取某个元素的直接子元素。它比子代选择器更加严格，只匹配该元素的直接子元素，而不包括更深层次的后代。

2. 基本语法

父元素 > 子元素 {属性: 值;
}

3. 示例

<div class="container"><p>这是一个段落</p><div>这是一个div元素</div><div><p>这是一个嵌套的段落</p></div>
</div>

.container > p {color: blue;
}

在这个例子中，<p>标签会被选中并应用蓝色文字样式，而嵌套在<div>内的<p>标签则不会被选中。

4. 注意事项

  • 使用>时，你可以精确控制只应用于直接子元素，避免不必要的样式继承。
  • 在层级结构深的情况下，直接子元素选择器可以大大提高性能，因为它不会匹配所有后代元素，只选择直系子元素。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 子代选择器示例</title><style>/* 使用子代选择器，选择id为parent的元素下的直接子元素p */#parent > p {color: blue;}/* 使用子代选择器，选择class为child的元素下的直接子元素span */.child > span {font-weight: bold;}div>p{color: red;}span>p{color: red;}</style>
</head>
<body><div id="parent"><p>这个段落的文字颜色会被设置为蓝色。</p><div><p>这个段落的文字颜色不会被改变，因为它不是#parent的直接子元素。</p></div></div><div class="child"><span>这个span的字体会被加粗。</span><p><span>这个span的字体不会被加粗，因为它不是.child的直接子元素。</span></p></div>
</body>
</html>

 

三、相邻兄弟选择器（Adjacent Sibling Selector）

1. 什么是相邻兄弟选择器？

相邻兄弟选择器（+）用于选取紧随指定元素后面的兄弟元素。这意味着它只会选择直接紧邻的元素，而不会选择其他的兄弟元素。

2. 基本语法

元素1 + 元素2 {属性: 值;
}

3. 示例

<h1>标题1</h1>
<p>这是段落1</p>
<h1>标题2</h1>
<p>这是段落2</p>

h1 + p {color: green;
}

在这个例子中，第二个<p>标签会应用绿色字体样式，因为它是紧接着第一个<h1>标签后的兄弟元素。

4. 注意事项

  • 相邻兄弟选择器只能作用于紧随其后的兄弟元素。如果中间有其他元素，选择器将无法匹配。
  • 它比其他选择器更具特定性，因为它只选择相邻的兄弟元素。

 

四、通用兄弟选择器（General Sibling Selector）

1. 什么是通用兄弟选择器？

通用兄弟选择器（~）用于选取所有紧随指定元素之后的兄弟元素，不限于直接紧邻的元素。

2. 基本语法

元素1 ~ 元素2 {属性: 值;
}

3. 示例

<h1>标题1</h1>
<p>段落1</p>
<div>DIV元素</div>
<p>段落2</p>

h1 ~ p {color: purple;
}

在这个例子中，h1 ~ p将匹配所有位于<h1>之后的<p>元素，并将它们的文本颜色设置为紫色。因此，第二个<p>元素会被选中，而**第一个<p>**元素不会，因为它位于h1之前。

4. 注意事项

  • 与相邻兄弟选择器不同，通用兄弟选择器可以选中所有位于目标元素之后的兄弟元素，而不仅仅是直接紧邻的元素。
  • 使用通用兄弟选择器时，浏览器的计算开销可能会略高，尤其是在较复杂的页面结构中。
<!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>/* 选中div后面紧挨着的p--相邻*//* div + p{color: red;} *//* 选中div后面所有的p--通用 */div~p{color: blue;}</style>
</head>
<body><p>CSS</p><div>前端</div><p>HTML</p><div>后端</div><p>C++</p><p>Python</p>
</body>
</html>

 

五、并集选择器（Union Selector）

1. 什么是并集选择器？

并集选择器（,）用于组合多个选择器，表示同时匹配多个选择器，任何一个选择器匹配的元素都会应用相同的样式。

2. 基本语法

选择器1, 选择器2, 选择器3 {属性: 值;
}

3. 示例

<p>段落1</p>
<h1>标题1</h1>
<h2>标题2</h2>

p, h1, h2 {color: orange;
}

在这个例子中，<p>、<h1>、和<h2>都会被应用橙色字体样式。

4. 注意事项

  • 使用并集选择器时，你可以一次性选中多个元素，避免重复编写样式规则。
  • 但是需要注意的是，多个选择器之间的顺序不影响样式应用。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 并集选择器示例</title><style>/* 使用并集选择器为多个元素设置相同的样式 */h1, p, span {color: blue;font-family: Arial, sans-serif;}h1{font-size: 40px;}</style>
</head>
<body><h1 >这是一个标题</h1><p>这是一个段落。</p><span>这是一个span元素。</span>
</body>
</html>

 

六、交集选择器（Intersection Selector）

1. 什么是交集选择器？

交集选择器（ ）表示多个选择器的交集，即选取那些同时满足所有选择器条件的元素。虽然CSS标准中没有“交集选择器”这个术语，但我们可以通过组合多个选择器来达到交集效果。

2. 基本语法

选择器1.选择器2 {属性: 值;
}

3. 示例

<div class="highlight active">这是一个高亮且激活的div</div>
<div class="highlight">这是一个仅高亮的div</div>

.highlight.active {background-color: yellow;
}

在这个例子中，只有同时具备.highlight和.active类的<div>元素才会应用黄色背景。

4. 注意事项

  • 交集选择器非常有用，尤其是需要同时满足多个条件时。
  • 交集选择器的优先级相对较高，因为它会选择具体的元素匹配组合。
<!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>p.tele{color: red;}.tele.rich{color: blue;}h2{color: aquamarine;}</style>
</head>
<body><h2 class="tele rich">张三</h2><p class="tele">张三的电话是:123456789</p><h2>李四</h2><p>李四的电话是:987654321</p><h2>王五</h2><p>王五的电话是:123456789</p>
</body>
</html>

 

七、总结

CSS复合选择器为我们提供了非常强大的样式控制能力，能够精确地选择元素并进行样式应用。通过合理使用子代选择器、兄弟选择器、并集选择器、交集选择器等，可以让页面的样式变得更加灵活和高效。在使用这些选择器时，务必注意它们的优缺点与性能影响，尤其是在复杂页面中，要避免选择器过度嵌套或使用过多的复合选择器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/20239.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSRF 漏洞原理演示 基本绕过（同源 异源） 配合XSSToken值校验复用删除

CSRF 漏洞原理演示 基本绕过（同源 异源） 配合XSSToken值校验复用删除

前言 CSRF的基本原理 就是 举例 我们伪造一个支付宝的转账请求&#xff08;抓包获取的&#xff09;&#xff0c;受害者 &#xff1a; 正好登录着支付宝&#xff08;后台&#xff09;的 同时点击了我们伪造的&#xff08;包含恶意请求&#xff09;网址 从而导致先我们进行转…
阅读更多...
外包干了3天，技术退步太明显了。。。

外包干了3天，技术退步太明显了。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;21年通过校招进入武汉某软件公司&#xff0c;干了差不多3年的功能测试&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了3年的功能测试&#xff0c;已经让…
阅读更多...
HomeAssistant 发现MQTT设备(温度,湿度,开关)

HomeAssistant 发现MQTT设备(温度,湿度,开关)

要通过 MQTT 将温度、湿度数据以及一个灯的开关状态传输到 Home Assistant 并实现设备自动发现&#xff0c;可以按照以下步骤操作&#xff1a; 1.前期准备工作 安装MQTT服务器(EMQX)配置好(可以在HA加载项中安装,也可以在NAS上Docker安装) HA的集成中安装MQTT,并且连接上(EM…
阅读更多...
【stm32】DAC实验(stm32f4hal库)

【stm32】DAC实验(stm32f4hal库)

一、DAC简介 1、DAC 数字到模拟转换器&#xff08;DAC&#xff09;是一种电子设备&#xff0c;用于将数字信号转换为模拟信号。它通常用于将数字数据转换为模拟信号&#xff0c;以便在模拟电路中进行处理。DAC在许多领域都有广泛的应用&#xff0c;如音频设备、通信系统、仪器…
阅读更多...
云计算架构学习之Ansible-playbook实战、Ansible-流程控制、Ansible-字典循环-roles角色

云计算架构学习之Ansible-playbook实战、Ansible-流程控制、Ansible-字典循环-roles角色

一、Ansible-playbook实战 1.Ansible-playbook安装软件 bash #编写yml [rootansible ansible]# cat wget.yml - hosts: backup tasks: - name: Install wget yum: name: wget state: present #检查playbook的语法 [rootansible ansible]…
阅读更多...
前端工程化的具体实现细节

前端工程化的具体实现细节

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
Chapter 3 Differential Voltage Current amplifiers

Chapter 3 Differential Voltage Current amplifiers

Chapter 3 Differential Voltage & Current amplifiers 这一章介绍差分电压和电流放大器. Current mirrors 我们首先分析电流镜Current Mirror. 由一个diode-connected MOSCS放大MOS组成, diode-MOS将电流转换成电压, 再由CS MOS转换成电流. 考虑沟道调制效应, M1和M2的…
阅读更多...
确保设备始终处于最佳运行状态，延长设备的使用寿命，保障系统的稳定运行的智慧地产开源了

确保设备始终处于最佳运行状态，延长设备的使用寿命，保障系统的稳定运行的智慧地产开源了

智慧地产视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。通过计算机视觉和…
阅读更多...
[笔记.AI]大模型的蒸馏、剪枝、量化 | 模型压缩 | 作用与意义

[笔记.AI]大模型的蒸馏、剪枝、量化 | 模型压缩 | 作用与意义

上周简单整理了《deepseek-r1的不同版本&#xff08;满血版、蒸馏版、量化&#xff09;》&#xff0c;这次继续完善对其的认知——补充“剪枝”&#xff0c;并进一步整理蒸馏、剪枝、量化的作用与意义。 以下摘自与DeepSeek-R1在线联网版的对话 蒸馏、剪枝、量化是当前主流的三…
阅读更多...
Java 反射机制深度解析：类信息的来源、declared 的区别、赋值操作及暴力反射

Java 反射机制深度解析：类信息的来源、declared 的区别、赋值操作及暴力反射

在 Java 开发中&#xff0c;反射机制是一个强大且灵活的工具&#xff0c;它允许程序在运行时动态地获取类的信息、创建对象、调用方法和访问字段等。本文将结合代码示例和图示&#xff0c;深入探讨以下四个问题&#xff1a; 类信息来自哪里&#xff1f; 获取类信息时加不加 de…
阅读更多...
Transformer 模型介绍（四）——编码器 Encoder 和解码器 Decoder

Transformer 模型介绍（四）——编码器 Encoder 和解码器 Decoder

上篇中讲完了自注意力机制 Self-Attention 和多头注意力机制 Multi-Head Attention&#xff0c;这是 Transformer 核心组成部分之一&#xff0c;在此基础上&#xff0c;进一步展开讲一下编码器-解码器结构&#xff08;Encoder-Decoder Architecture&#xff09; Transformer 模…
阅读更多...
电脑系统损坏，备份文件

电脑系统损坏，备份文件

一、工具准备 1.U盘&#xff1a;8G以上就够用&#xff0c;注意会格式化U盘&#xff0c;提前备份U盘内容 2.电脑&#xff1a;下载Windows系统并进行启动盘制作 二、Windows启动盘制作 1.微软官网下载启动盘制作工具微软官网下载启动盘制作工具https://www.microsoft.com/zh-c…
阅读更多...
Linux下Ollama下载安装速度过慢的解决方法

Linux下Ollama下载安装速度过慢的解决方法

问题描述&#xff1a;在Linux下使用默认安装指令安装Ollama&#xff0c;下载安装速度过慢&#xff0c;进度条进度缓慢&#xff0c;一直处于Downloading Linux amd64 bundle中&#xff0c;具体如下图所示&#xff1a; 其中&#xff0c;默认的Ollama Linux端安装指令如下&#xf…
阅读更多...
uniapp中@input输入事件在修改值只有第一次有效的问题解决

uniapp中@input输入事件在修改值只有第一次有效的问题解决

在uniapp中使用输入框&#xff0c;要求输入不超过7个字&#xff0c;所以需要监听输入事件&#xff0c;当每次输入文字的时候&#xff0c;就把输入的值截断&#xff0c;取前7个值。但是在input事件中&#xff0c;重新赋值的值发生了变化&#xff0c;但是页面上的还是没有变&…
阅读更多...
DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…
阅读更多...
VMware按照的MacOS升级后无法联网

VMware按照的MacOS升级后无法联网

背景 3年前公司使用Flutter开发了一款app&#xff0c;现在app有微小改动需要重新发布到AppStore 问题 问题是原来的Vmware搭建的开发环境发布App失败了 提示&#xff1a;App需要使用xcode15IOS 17 SDK重新构建&#xff0c;这样的话MacOS至少需要升级到13.5 Xcode - 支持 - Ap…
阅读更多...
Day01 【苍穹外卖】环境搭建与前后端联调

Day01 【苍穹外卖】环境搭建与前后端联调

一、环境搭建 1.JDK安装与IDEA安装&#xff1a; JDK安装与IDEA安装&#xff1a;【JAVA基础】01、JAVA环境配置----JDK与 IDEA集成开发环境的安装&#xff08;2025最新版本&#xff09;_配置jdk-CSDN博客 注意&#xff0c;这里要下载JDK1.8版本的&#xff0c;不然会报错&…
阅读更多...
STM32 HAL库USART串口中断编程：环形缓冲区防止数据丢失

STM32 HAL库USART串口中断编程：环形缓冲区防止数据丢失

HAL_UART_Receive接收最容易丢数据了,可以考虑用中断来实现,但是HAL_UART_Receive_IT还不能直接用,容易数据丢失,实际工作中不会这样用,STM32 HAL库USART串口中断编程&#xff1a;演示数据丢失,需要在此基础优化一下. 本文介绍STM32F103 HAL库USART串口中断,利用环形缓冲区来防…
阅读更多...
Vulnhub：DC-1靶机渗透

Vulnhub：DC-1靶机渗透

渗透过程 一&#xff0c;信息收集 1&#xff0c;探测目标IP地址 探测目标IP地址&#xff0c;探测主机的工具有很多&#xff0c;常见的有arp-scan、nmap还有netdiscover&#xff0c;这里使用arp-scan arp-scan -l确定了DC-1主机的IP地址为 192.168.126.1452&#xff0c;探测…
阅读更多...
MySQL 之存储引擎（MySQL Storage Engine）

MySQL 之存储引擎（MySQL Storage Engine）

MySQL 之存储引擎 常见存储引擎及其特点 ‌InnoDB‌&#xff1a; ‌特点‌&#xff1a;支持事务处理、行级锁定、外键约束&#xff0c;使用聚簇索引&#xff0c;适合高并发读写和事务处理的场景‌。‌适用场景‌&#xff1a;需要高可靠性、高并发读写和事务处理的场景‌。 ‌M…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023