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

CSS 组合选择符详解与实战示例

article 2026/4/29 14:27:07

在 Web 开发过程中，CSS 用于定义页面元素的样式，而选择器则帮助我们精确定位需要添加样式的元素。今天我们主要来讲解 CSS 中的组合选择符，它们能够根据 DOM 结构中元素之间的关系来选中目标元素，从而写出结构清晰、易于维护的 CSS 代码。

本文主要介绍以下几种组合选择符：

  1. 后代选择器
  2. 子选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

1. 后代选择器（Descendant Combinator）

后代选择器使用空格分隔两个选择器，例如：A B。
解释：该规则可以选中所有包含在 A 内部（不论层级深浅）的 B 元素。

示例代码：

div p {color: red;
}

说明：
这条规则将页面中所有在 <div> 内部的 <p> 元素的文字颜色设置为红色，不论 <p> 与 <div> 之间隔了多少层级。

2. 子选择器（Child Combinator）

子选择器使用 > 符号链接两个选择器，形如：A > B。
解释：该选择器仅选中作为 A 元素直接子元素的 B 元素，深层嵌套的 B 元素则不符合此规则。

示例代码：

ul > li {list-style-type: none;
}

说明：
这条规则仅移除 <ul> 标签下直接 <li> 子元素的默认列表样式。如果 <li> 被嵌套在其他元素中，则不会受到该规则影响。

3. 相邻兄弟选择器（Adjacent Sibling Combinator）

相邻兄弟选择器使用 + 符号连接，写作：A + B。
解释：该选择器用于选中处于 A 元素之后、同属一个父元素的第一个 B 元素。

示例代码：

h1 + p {margin-top: 0;
}

说明：
这条规则会将每个紧跟 <h1> 标签后（且处于同一父元素下）的第一个 <p> 元素的上边距设为 0。如果 <h1> 与 <p> 之间有其他元素存在，则该规则不生效。

4. 通用兄弟选择器（General Sibling Combinator）

通用兄弟选择器使用 ~ 符号，写作：A ~ B。
解释：该规则选中所有在 A 元素之后的同级 B 元素，而不要求它们一定紧邻 A 元素。

示例代码：

h1 ~ p {color: blue;
}

说明：
这条规则将所有在 <h1> 标签之后的同层级 <p> 元素的文字颜色设置为蓝色，不论它们是否紧邻 <h1> 标签。

综合示例

下面结合一个完整的 HTML 示例，演示如何利用上面介绍的组合选择符为不同关系的元素添加样式。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>CSS 组合选择符示例</title><style>/* 1. 后代选择器：所有 <div> 内部的 <span> 元素 */div span {background-color: yellow;}/* 2. 子选择器：仅选择 <div> 的直接 <p> 子元素 */div > p {border: 1px solid blue;padding: 5px;}/* 3. 相邻兄弟选择器：紧跟在 <h2> 后面的 <p> 元素 */h2 + p {font-weight: bold;color: green;}/* 4. 通用兄弟选择器：所有在 <h2> 后出现的 <section> 元素 */h2 ~ section {margin-top: 10px;border: 1px dashed gray;}</style>
</head>
<body><div><span>这是一个 span 元素（后代选择器）</span><p>这是直接作为 div 子元素的 p 元素（子选择器）</p><div><p>这是嵌套更深层的 p 元素（不受子选择器影响）</p></div></div><h2>标题</h2><p>这是紧邻 h2 后面的 p 元素（相邻兄弟选择器）</p><section><p>这是 h2 后出现的 section 元素（通用兄弟选择器）</p></section><p>这个 p 元素未紧邻 h2，不受相邻兄弟选择器影响，但如果它和 h2 属于同一父元素，则可能被通用兄弟选择器选中（具体取决于 HTML 结构）。</p>
</body>
</html>

说明：

  • 后代选择器：div span 选中所有在 <div> 内部的 <span> 元素，给其添加黄色背景。
  • 子选择器：div > p 规则只为 <div> 内的直接 <p> 子元素添加蓝色边框及内边距。
  • 相邻兄弟选择器：h2 + p 使得紧随 <h2> 后的第一个 <p> 标签显示为绿色、加粗。
  • 通用兄弟选择器：h2 ~ section 规则则选中 <h2> 标签之后所有的 <section> 元素，为其添加上边距及虚线边框。

总结

CSS 组合选择符能够帮助我们根据 DOM 树中元素之间的层级关系或并列关系来精确选取目标元素，这对于编写高效、可维护且层次分明的 CSS 代码至关重要。通过合理应用后代选择器、子选择器、相邻兄弟选择器与通用兄弟选择器，我们不仅能够提高样式的复用性，还能减少冗余代码，从而提升页面的渲染效率。

希望本篇博客对你深入理解 CSS 组合选择符有所帮助，如果你有任何疑问或建议，欢迎在下方留言讨论！

参考资料：

  • MDN CSS Selectors
  • W3Schools CSS Selector Reference

Happy Coding!

相关文章：

CSS 组合选择符详解与实战示例

在 Web 开发过程中&#xff0c;CSS 用于定义页面元素的样式&#xff0c;而选择器则帮助我们精确定位需要添加样式的元素。今天我们主要来讲解 CSS 中的组合选择符&#xff0c;它们能够根据 DOM 结构中元素之间的关系来选中目标元素&#xff0c;从而写出结构清晰、易于维护的 CS…...

编程日记 2026/4/24 12:04:35

html为＜td＞添加标注文本

样式说明&#xff1a; /*为td添加相对定位点*/ .td_text {position: relative; }/*为p添加绝对坐标(相对于父元素中的定位点)*/ .td_text p {position: absolute;top: 80%;font-size: 8px; }参考资料&#xff1a;...

编程日记 2026/4/13 16:41:23

apachePoi中XSSFClientAnchor图片坐标简述；填充多张图片

概述 业务中经常会遇到在单元格内填充图片的需求&#xff0c;而且要求指定图片在单元格内的位置。 一般都是用的apache的poi&#xff0c;设置图片坐标。 HSSFClientAnchor(int dx1, int dy1, int dx2, int dy2, short col1, int row1, short col2, int row2)dx1 dy1 起始单元…...

编程日记 2026/4/14 3:13:00

无界构建微前端？NO！NO！NO！多系统融合思路！

文章目录 微前端理解1、微前端概念2、微前端特性3、微前端方案a、iframeb、qiankun --> 使用比较复杂 --> 自己写对vite的插件c、micro-app --> 京东开发 --> 对vite支持更拉跨d、EMP 方案--> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方…...

编程日记 2026/4/13 11:55:12

数据留痕的方法

在项目中&#xff0c;数据变更时&#xff0c;经常需要记录上次的数据&#xff0c;以便查看对比&#xff0c;专业术语叫做数据留痕。数据变更留痕&#xff08;即记录数据的变更历史&#xff09;是一个常见的需求&#xff0c;例如在审计、追踪数据变化或满足合规性要求的场景中。…...

编程日记 2025/12/30 3:12:27

Glustefs 服务端配置流程

Glustefs 服务端配置流程 &#xff08;一&#xff09;环境搭建 名称ip硬件设备文件虚拟机 gluster1192.168.101.12G新磁盘/dev/sdb虚拟机 gluster2192.168.101.22G新磁盘/dev/sdb虚拟机 gluster3192.168.101.32G新磁盘/dev/sdb &#xff08;二&#xff09;磁盘格式化&#x…...

编程日记 2026/2/9 2:10:31

为飞牛OS基于FRP的内网穿透开启HTTPS加密

前言 玩NAS的朋友应该有比较多只是在家庭局域网使用&#xff0c;比如日常看看电影、备份手机照片什么的&#xff0c;这属于家庭局域网的使用场景。 当然了&#xff0c;如果你经常出差&#xff0c;或者过年回家不想把NAS也背回去&#xff0c;或者是想上班摸鱼&#xff0c;或者是…...

编程日记 2026/4/8 21:19:03

《基于Python与DashScope的智能语音合成工具开发》

《基于Python与DashScope的智能语音合成工具开发》 在当今数字化时代&#xff0c;语音合成技术已经广泛应用于各种场景&#xff0c;如智能语音助手、有声读物、导航系统等。本文将介绍如何使用Python和DashScope平台开发一个简单而功能强大的文字转语音工具。通过这个工具&…...

编程日记 2026/4/8 2:52:36

快速上手Vim的使用

Vim Linux编辑器-vim使用命令行模式下所有选项都可以带数字底行模式可视块模式&#xff08;ctrlV进入&#xff09; Linux编辑器-vim使用 Vim有多种模式的编辑器。能帮助我们很快的进行代码的编辑&#xff0c;甚至完成很多其他事情。 默认情况下我们打开vim在命令模式下&#x…...

编程日记 2026/4/9 2:51:27

vue学习第四天 v-on事件绑定

v-on绑定事件如下&#xff0c;点击按钮会弹出alert v-on&#xff1a;事件具体名称“事件调用的函数名” 事件调用的函数写在methods里面 在methods属性的函数里&#xff0c;可以用this获取data的数据&#xff0c;this代表的就是整个vue实例 用this.age就可以拿到age&#xff0…...

编程日记 2026/4/14 4:35:48

2.8寒假作业

web&#xff1a;[HNCTF 2022 Week1]2048 之前也做过类似的题目&#xff0c;之前的解法是直接get传参score20000&#xff0c;可以尝试 打开环境看源代码&#xff0c;直接改源代码显然是不行的&#xff0c;那么用一下上面的办法也不行&#xff0c;估计是要改其他方向的&#xff…...

编程日记 2026/4/9 9:13:38

PyTorch torch.sign函数介绍

torch.sign 是 PyTorch 库中用于计算输入张量每个元素符号的函数。下面从功能概述、函数原型、参数解释、返回值、使用示例以及与相关函数对比等方面详细介绍 torch.sign。 功能概述 torch.sign 函数会返回一个与输入张量形状相同的新张量&#xff0c;其中每个元素的值表示输…...

编程日记 2025/12/12 6:37:31

Formality：时序变换（五）（寄存器复制）

相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 一、引言 时序变换在Design Compiler的首次综合和增量综合中都可能发生&#xff0c;它们包括&#xff1a;时钟门控(Clock Gating)、寄存器合并(Register Merging)、…...

编程日记 2026/4/10 2:46:01

音频知识基础

音频知识基础 声音属性声音度量人耳特性通道数音频数字化传输接口 声音属性 响度 响度是人耳对声音强弱的主观感受&#xff1b; 主要和声波的振幅相关&#xff0c;同时也和频率有一定关系&#xff1b; 音调 音调是人耳对声音高低的主观感受&#xff1b; 主要与频率相关&#…...

编程日记 2026/4/14 13:40:27

科技赋能数字内容体验的核心技术探索

内容概要 在数字化时代&#xff0c;科技的迅猛发展为我们的生活和工作带来了深刻的变革。数字内容体验已经成为人们获取信息和娱乐的重要途径&#xff0c;而这背后的技术支持则扮演着至关重要的角色。尤其是在人工智能、虚拟现实和区块链等新兴技术的推动下&#xff0c;数字内…...

编程日记 2026/4/13 20:53:19

DeepSeek-R1 本地大模型搭建对接API

DeepSeek-R1 在这里将学到很多知识 欢迎使用使用DeepSeek-R1本地大模型DeepSeek 的模型基础说明DeepSeek的本地 API 说明DeepSeek 本地模型搭建1、执行命令安装及测试 DeepSeek-R1 API接口调用当然&#xff0c;我们为了让用户更加便捷&#xff0c;我们把API 接口全部放到上面截…...

编程日记 2026/4/13 9:31:23

利用NestJS构建高效的RESTful API接口

1. 引言 项目背景与目标 随着互联网应用的快速发展，RESTful API已成为前后端分离架构中的重要组成部分。本文将介绍如何使用NestJS构建一个高效且可维护的RESTful API接口。目标是通过NestJS的模块化和依赖注入特性，实现一个易于扩展和维护的API系统。 RESTful API的重要性…...

编程日记 2026/2/24 8:25:37

redis高级数据结构布隆过滤器

文章目录 背景什么是布隆过滤器Redis 中的布隆过滤器布隆过滤器使用注意事项实现原理空间占用估计 背景 我们在使用新闻客户端看新闻时&#xff0c;它会给我们不停地推荐新的内容&#xff0c;它每次推荐时要去重&#xff0c;去掉那些已经看过的内容。问题来了&#xff0c;新闻…...

编程日记 2026/4/9 20:16:31

《Wiki.js知识库部署实践 + CNB Git数据同步方案解析》

一、wiki.js 知识库简介 基本概述 定义 &#xff1a;Wiki.js 是一个开源、现代、轻量且功能强大的 Wiki 应用程序&#xff0c;基于 Node.js 构建&#xff0c;旨在帮助个人和团队轻松创建、管理和共享知识。开源性质 &#xff1a;它遵循 AGPLv3 许可证&#xff0c;任何人都可以…...

编程日记 2026/4/21 0:06:45

CSS Overflow 属性详解：控制内容溢出的利器

在前端开发中&#xff0c;处理内容溢出是一个常见的需求。CSS 提供了 overflow 属性&#xff0c;帮助我们控制当内容超出元素框时的显示方式。本文将详细介绍 overflow 属性的各种取值及其应用场景。 1. 什么是 overflow 属性&#xff1f; overflow 属性用于控制当元素的内容…...

编程日记 2026/4/20 12:21:43

.yml文件_YAML格式文件

.yml 文件是 YAML&#xff08;YAML Ain’t Markup Language&#xff09;格式的一种文件扩展名。YAML 是一种用于数据序列化的语言&#xff0c;通常用于配置文件、数据交换、日志记录等场景。它以可读性高、简洁的格式为特点&#xff0c;非常适合用于人类阅读和编写。YAML 通常被…...

编程日记 2026/3/1 20:50:58

根文件系统 Debian10【1】移植

1.开发背景 一般根文件系统使用 Busybox 或者是 Buildroot 构建&#xff0c;这样构建出来的文件系统比较小&#xff0c;但是不具备上网功能&#xff0c;扩展性比较差。随着 ARM 的日益强大&#xff0c;ARM 可以搭载更庞大复杂的系统&#xff0c;可以是 Ubuntu 或者 Debian 等发…...

编程日记 2026/4/12 9:34:24

【PyQt】实现格式刷功能

实现格式刷功能 在Qt Designer中直接实现格式刷功能并不支持&#xff0c;但可以通过以下方法在应用程序中实现类似功能&#xff1a; 一、Qt Designer中的替代方案 1.手动设置样式表 在属性编辑器中复制样式表&#xff08;QSS&#xff09;内容&#xff0c;粘贴到其他控件。 …...

编程日记 2026/4/10 2:53:11

Could not create task ‘:mainActivity:minifyReleaseWithR8‘.

最近接收了一个老项目&#xff0c;把项目clone下来后&#xff0c;总是报错&#xff0c;无法运行 Build-tool 33.0.1 is missing DX at D:\Android\Sdk\build-tools\33.0.1\dx.batFAILURE: Build failed with an exception.* What went wrong: Could not determine the depende…...

编程日记 2026/2/23 20:01:39

2025年日祭

本文将同步发表于洛谷&#xff08;暂无法访问&#xff09;、CSDN 与 Github 个人博客&#xff08;暂未发布&#xff09; 本蒟自2025.2.8开始半停课。 任务计划&#xff08;站外题与专题&#xff09; 数了一下&#xff0c;通过人数比较高的题&#xff0c;也就是我准备补的题&a…...

编程日记 2026/4/9 14:34:32

二维dp-地图

问题描述 传说&#xff0c;在蓝桥王国中一个极其神秘的森林。这个森林的起点在(1,1) &#xff0c;终点在 (n,m)。在你进入这个森岭后&#xff0c;每次你只可以向下或者向右走&#xff0c;由于森岭的神秘力量&#xff0c;至多只可以改变 k 次方向。 小蓝现在想知道&#xff0c…...

编程日记 2026/1/4 20:08:23

Windows下AMD显卡在本地运行大语言模型(deepseek-r1)

Windows下AMD显卡在本地运行大语言模型 本人电脑配置第一步先在官网确认自己的 AMD 显卡是否支持 ROCm下载Ollama安装程序模型下载位置更改下载 ROCmLibs先确认自己显卡的gfx型号下载解压 替换替换rocblas.dll替换library文件夹下的所有 重启Ollama下载模型运行效果 本人电脑配…...

编程日记 2026/4/23 16:41:08

el-table表格点击单元格实现编辑

使用 el-table 和 el-table-column 创建表格。在单元格的默认插槽中&#xff0c;使用 div 显示文本内容&#xff0c;单击时触发编辑功能。使用 el-input 组件在单元格中显示编辑框。data() 方法中定义了 tableData&#xff0c;tabClickIndex: null,tabClickLabel: ,用于判断是否…...

编程日记 2026/4/25 18:38:08

数据库操作与数据管理——Rust 与 SQLite 的集成

第六章&#xff1a;数据库操作与数据管理 第一节&#xff1a;Rust 与 SQLite 的集成 在本节中&#xff0c;我们将深入探讨如何在 Rust 中使用 SQLite 数据库&#xff0c;涵盖从基本的 CRUD 操作到事务处理、数据模型的构建、性能优化以及安全性考虑等方面。SQLite 是一个轻量…...

编程日记 2026/4/14 6:45:05

Ubuntu 24.10 安装Deepseek(Ollama+openwebui)

一、Ollama安装 1.在线安装 curl -fsSL https://ollama.com/install.sh | sh 如果curl工具没有安装先执行如下命令 sudo apt install curl 验证curl是否安装成功 curl --version 安装的过程中会提示输入当前系统登录用户的密码。 安装提示success后，验证安装 ollama -…...

编程日记 2026/4/26 17:08:31