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}…...
3分钟快速上手：用BetterNCM安装器彻底改造你的网易云音乐
3分钟快速上手：用BetterNCM安装器彻底改造你的网易云音乐 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在使用功能单一的网易云音乐吗？想不想让你的播放器拥…...
AMLP：基于大语言模型的自动化机器学习势函数构建平台
1. 项目概述：当AI遇见原子模拟，AMLP如何重塑机器学习势函数构建在计算材料科学和化学物理领域，分子动力学模拟是我们窥探微观世界动态行为的“显微镜”。无论是研究新材料的相变过程，还是探索生物大分子的折叠机制，其核…...
力扣HOT100（30）两两交换链表中的节点
链表的交换要注意 “链表不断链”。前驱和后继都要连着迭代法（必学死磕！O (n) 时间，O (1) 空间）1. 为什么必须用虚拟头节点？因为交换后链表的头节点会变！ 比如示例 1 中，原来的头是 1࿰…...
智慧无人机巡检-无人机可见光红外数据集 无人机多模态检测数据集 红外与可见光检测数据集
智慧无人机巡检-无人机可见光红外数据集，已完成标注，可导出各种常用数据集，yolo，voc，coco等格式。可见光33000张，红外16100张，目标一张一个 无人机可见光红外目标数据集项目详细信息数据集名称无…...
Taotoken平台快速获取APIKey并开始你的第一个Python调用示例
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken平台快速获取APIKey并开始你的第一个Python调用示例 1. 准备工作：注册与登录 要开始使用Taotoken，…...
开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？
开源 AI Agent Harness Engineering 框架全览：LangChain, AutoGPT, CrewAI 孰优孰劣？ 关键词 AI Agent Harness Engineering、大语言模型编排（LLM Orchestration）、LangChain、AutoGPT、CrewAI、工具调用（Tool Calling）、多Agent协作、自主任务规划 摘要 随着大语言模型…...
机器学习在射电天文数据分类中的应用：以MIGHTEE巡天SFG/AGN分类为例
1. 项目概述：当机器学习遇见深空射电巡天在射电天文学领域，我们正经历一场数据洪流。以MeerKAT望远镜阵列主导的MIGHTEE巡天项目为例，其在COSMOS天区的一次早期科学数据释放，就在不到1平方度的天区内探测到了超过6000个射电源。传…...
从无线破解到PDF解密：盘点那些容易被忽略的‘非主流’密码审计场景与工具
密码安全审计的隐秘战场：从无线网络到加密文档的实战指南 当大多数人谈论密码安全时，脑海中浮现的往往是服务器登录、数据库访问这些企业级场景。然而在数字生活的每个角落，从家庭Wi-Fi到工作文档，密码保护的脆弱性同样可能成为安…...
反向海淘站点常见配置故障复盘与数据一致性优化方案
摘要反向海淘独立站运行过程中，容易出现价格换算异常、页面语种错乱、商品同步失败、订单状态停滞、运费计算偏差等问题。多数故障并非系统底层缺陷，而是配置逻辑理解偏差、数据规范不统一引发。本文结合实际运维场景，汇总高频故障成因&#…...
基于MAX78000的边缘AI语音识别：从模型训练到嵌入式部署实战
1. 项目概述与核心思路最近在捣鼓一个挺有意思的小项目，我把它叫做“声控转向控制器”。简单来说，这玩意儿能听懂你说的几个特定单词，比如“左转”、“右转”、“前进”、“后退”，然后控制对应的LED灯亮起。你可能会想࿰…...