CSS中真正表达“关系”的组合子选择器只有4个：空格（后代）、>（子代）、+（相邻兄弟）、~（通用兄弟）；逗号是分组而非组合子；后代选择器匹配任意嵌套层级，子代选择器仅匹配直接子元素，兄弟选择器要求同父同级且顺序正确。
CSS里真正能表达“关系”的组合子选择器只有 4 个：空格（后代）、>（子代）、+（相邻兄弟）、~（通用兄弟）。逗号 , 是分组，不算组合子——它不描述结构关系，只做样式复用。
后代选择器（空格）最常用也最容易误用
写成 .card p 这种形式，会匹配 .card 内部任意嵌套层级的 p，哪怕中间隔了 5 层 div 也照样生效。
- 适合容器内统一样式，比如统一设置文章区域所有段落行高
- 但性能开销略高，浏览器需递归遍历整棵子树
- 容易意外命中深层嵌套内容，比如侧边栏里的
p也被改了 - 别写成
.card > p却误以为是后代——符号错了就完全不是一回事
> 子代选择器只认“亲儿子”
.nav > ul > li 这种链式写法，要求每个 > 左右两边的元素必须是直接父子关系。一旦中间插了个 div，后面整个链就断了。
- 常用于菜单一级项、表单直系控件等需要精确控制层级的场景
- 比后代选择器性能好，浏览器只需查一层子节点
- 注意：
div > p不会匹配<div><section><p>xxx</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section></div>中的p - 多个
>连用时，可读性下降，建议拆成更语义化的类名
+ 和 ~ 兄弟选择器都要求同级同父
这两个必须满足两个硬条件：A 和 B 元素得在 DOM 中处于同一父容器下，且顺序上 A 在前、B 在后。
-
h2 + p只选紧挨着h2的第一个p；中间插个img就失效 -
input:focus ~ label会选中同一父级下所有在该input后面的label，不管隔了几层其他元素 - 它们无法跨父容器工作，比如
header + main在下才有效，嵌套在<article></article>里就匹配不到 - 实际项目中，
~比+更容易引发意料外的样式扩散
真正难的不是记住这四个符号，而是每次写之前想清楚：你到底要匹配“所有后代”，还是“仅限直系”，抑或“仅限后面这几个同级”。DOM 结构稍一变动，> 和 + 就会静默失效，而空格和 ~ 却可能悄悄多选中一些东西——这种隐性行为才是调试时最耗时间的地方。
