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}…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
C++ 基础特性深度解析
目录 引言 一、命名空间（namespace） C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用（reference） C 中的引用 与 C 语言的对比 四、inline（内联函数…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...