不能选“所有段落”因其仅匹配直接子级，而选全部层级p须用后代选择器.card p；它从右往左遍历祖先，兼容性好且不受dom结构变动影响。
p 元素本身没有“嵌套在容器内”这个天然属性，> 也无法选中“所有段落”——它只认直接子级。想选容器里**全部层级的 p**，必须用空格（后代选择器），不是 >。
为什么 > 不能用来选“所有段落”
> 是子代选择器，语义上只匹配父元素的**第一层子元素**。它不递归、不穿透、不关心“是不是段落”，只看 DOM 树里有没有直系父子关系。
- 写
.card > p：只命中<div class="card"><p>...</p></div>这种结构，<div class="card"><section><p>...</p></section></div>里的p完全不会被选中 - 写
> p（无前缀）：浏览器会按全局文档树解析，等价于:root > p，几乎总是不生效，尤其在 Shadow DOM 或框架渲染下直接失效 - 想覆盖所有嵌套深度？
>本身就不支持——它天生排斥孙级、曾孙级
真正该用什么选容器内的所有 p
用空格，也就是后代选择器：.card p。它从右往左匹配：先找所有 p，再逐个往上查祖先，只要某个祖先匹配 .card 就应用样式。
- 结构无关嵌套深度：
<div class="card"> <p>1</p> <div><section><p>2</p></section></div> </div>中两个p都会被.card p选中 - 兼容性好：所有浏览器都支持，包括旧版 IE
- 写法更轻量，无需为每一层都补
>，比如不用写.card > div > section > p
什么时候才必须用 >
仅当你需要**精确控制作用域边界**，且明确排除深层嵌套时才用。典型场景：
- 导航菜单一级项：
nav > ul > li，避免误样式化二级下拉菜单里的li - 卡片标题只作用于直接子：
.card > .title，防止内容区里另一个.title被连带影响 - 重置某层容器的默认 margin：
.content > p，但不碰.content blockquote > p
注意：一旦容器中间用了 display: contents 或存在 Shadow DOM，> 就会断链——而空格选择器不受这些影响。
容器查询里 > 更容易出错
在 @container 规则中，> 的行为不会因容器边界自动修正。例如：
@container (min-width: 400px) {
> p { color: red; } /* ❌ 错误：没锚定容器，匹配根下的 p */
.card > p { color: red; } /* ✅ 正确：.card 是真实容器元素，且必须已设 container-type */
}
Chrome 110+ 和 Firefox 119+ 支持容器查询，但 Safari 对 > 解析更严格；测试时别只靠 DevTools 的 viewport 切换，得用 container-name + 实际尺寸验证。
真正难的不是写对符号，而是判断“这里到底需不需要切断继承链”。多数时候，.card p 比 .card > p 更鲁棒，也更接近真实需求。
