CSS 组合选择符详解与实战示例
在 Web 开发过程中，CSS 用于定义页面元素的样式，而选择器则帮助我们精确定位需要添加样式的元素。今天我们主要来讲解 CSS 中的组合选择符，它们能够根据 DOM 结构中元素之间的关系来选中目标元素，从而写出结构清晰、易于维护的 CSS 代码。
本文主要介绍以下几种组合选择符：
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
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 开发过程中，CSS 用于定义页面元素的样式，而选择器则帮助我们精确定位需要添加样式的元素。今天我们主要来讲解 CSS 中的组合选择符，它们能够根据 DOM 结构中元素之间的关系来选中目标元素，从而写出结构清晰、易于维护的 CS…...
Window系统通过Docker本地安装ollama和deepseek
在 Windows 系统上安装 Ollama 和 DeepSeek 的步骤如下： 安装 Ollama 安装 WSL（Windows Subsystem for Linux）： 如果还没有安装 过WSL的（安装过的你直接跳过就行了），可以按照以下步骤进行安装&…...
镜头放大倍率和像素之间的关系
相互独立的特性 镜头放大倍率：主要取决于镜头的光学设计和结构，决定了镜头对物体成像时的缩放程度，与镜头的焦距等因素密切相关。比如，微距镜头具有较高的放大倍率，能将微小物体如昆虫、花朵细节等放大成像࿰…...
P3413 SAC#1 - 萌数
题目背景 本题由世界上最蒟蒻的 SOL 提供。 寂月城网站是完美信息教室的官网。地址：http://191.101.11.174/mgzd。 题目描述 蒟蒻 SOL 居然觉得数很萌！ 好在在他眼里，并不是所有数都是萌的。只有满足“存在长度至少为 22 的回文子串”的数是萌的——也就是说，101 是萌…...
[RabbitMQ] RabbitMQ常见面试题
🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…...
Java运行时数据区
JVM主要流程包括三部分： 首先是 ClassLoard 类加载器，加载数据源文件到jvm当中然后将加载好的数据存放在运行时数据区最后由引擎进行解释和编译的工作 1.Java 内存区域： 1.1 程序计数器 程序计数器（Program Counter Register&a…...
【03】 区块链分布式网络
3-1 P2P网络 传统中心化网络由中央服务器保存全量数据。客户端之间无法直接连接，必须通过中央服务器作为桥梁。客户端必须和中央服务器建立连接后访问资源。客户端之间并无连通。 在P2P网络中通过将数据资源分散在网络各个节点中存储以及节点间交互连接࿰…...
【SQL server】关于SQL server彻底的卸载删除。
1.未彻底卸载删除SQL Server会出现的问题 如果没有彻底删除之前的SQL server，就可能会出现这个 当要安装新的实例的时候因为之前安装过sql server没有删除干净而导致下图问题，说实例名已经存在。 2.首先要先关闭服务 “开始R”可以快速进入运行&#…...
【含文档+PPT+源码】基于微信小程序的校园志愿者管理系统的设计与实现
项目介绍 本课程演示的是一款 基于微信小程序的校园志愿者管理系统的设计与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本…...
Docker入门（Windows）
视频链接：Docker | 狂神说 环境说明 Windows For Docker WSL2 概念 Docker是什么？ 百度百科：百度百科 Docker 是一个开源的平台，它利用操作系统级虚拟化技术来打包和运行应用程序。通过使用容器化技术，Docker 提…...
深度求索（DeepSeek）的AI革命：NLP、CV与智能应用的技术跃迁
Deepseek官网：DeepSeek 引言：AI技术浪潮中的深度求索 近年来，人工智能技术以指数级速度重塑全球产业格局。在这场技术革命中，深度求索（DeepSeek）凭借其前沿的算法研究、高效的工程化能力以及对垂直场景的…...
Mac本地体验LM studio
博主很懒，不爱打字！ 1、LM studio官网：LM Studio - Discover, download, and run local LLMs 2、下载DMG文件，安装 3、使用vscode工具，commandshiftH【全局替换功能】，选择目录/Applications/LM\ Studio…...
Spring Boot 线程池自定义拒绝策略：解决任务堆积与丢失问题
如何通过自定义线程池提升系统稳定性 背景 在高并发系统中，线程池管理至关重要。默认线程池可能导致： 资源浪费（创建过多线程导致 OOM）任务堆积（队列满后任务被拒绝）任务丢失（默认拒绝策略丢…...
解锁摄影潜能：全面解析相机镜头的选择与使用逻辑
目录 一、镜头分类：从焦距到用途的底层逻辑 （一）按焦距和视角分类（一级分类） （二）按特殊用途分类（一级分类） 二、参数解码：超越 “光圈越大越好” 的思维定…...
【Unity】从父对象中获取子对象组件的方式
1.GetComponentInChildren 用于获取对与指定组件或游戏对象的任何子级相同的游戏对象上的组件类型的引用。 该方法在Unity脚本API的声明格式为： public T GetComponentInChildren(bool includeInactive false) includeInactive参数（可选）…...
第六届MathorCup高校数学建模挑战赛-A题：淡水养殖池塘水华发生及池水自净化研究
目录 摘要 1 问题的重述 2 问题的分析 2.1 问题一的分析 2.2 问题二的分析 2.3 问题三的分析 2.4 问题四的分析 2.5 问题五的分析 3. 问题的假设 4. 符号说明 5. 模型的建立与求解 5.1 问题一的建模与求解 5.1.1 分析对象与指标的选取 5.1.2 折线图分析 5.1.3 相关性分析 5.1.4…...
webpack【初体验】使用 webpack 打包一个程序
打包前 共 3 个文件 dist\index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Webpack 示例&…...
＜论文＞DeepSeek-R1：通过强化学习激励大语言模型的推理能力（深度思考）
一、摘要 本文跟大家来一起阅读DeepSeek团队发表于2025年1月的一篇论文《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning | Papers With Code》，新鲜的DeepSeek-R1推理模型，作者规模属实庞大。如果你正在使用Deep…...
公司配置内网穿透方法笔记
一、目的 公司内部有局域网，局域网上有ftp服务器，有windows桌面服务器； 在内网环境下，是可以访问ftp服务器以及用远程桌面登录windows桌面服务器的； 现在想居家办公时，也能访问到公司内网的ftp服务器和win…...
python爬虫--简单登录
1，使用flask框架搭建一个简易网站 后端代码app.py from flask import Flask, render_template, request, redirect, url_for, sessionapp Flask(__name__) app.secret_key 123456789 # 用于加密会话数据# 模拟用户数据库 users {user1: {password: password1}…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...