子选择器（>）只匹配某元素的直接子元素，不匹配更深层的后代；基本格式为“父元素 > 子元素”，如 ul > li 或 .container > p，区别于后代选择器（空格），且对html结构敏感。
用 子选择器（>），它只匹配某元素的**直接子元素**，不穿透到更深层的后代（比如孙子、曾孙等）。
子选择器的基本写法
格式为：父元素 > 子元素。中间的 > 两侧建议留空格，提高可读性（虽然不加空格浏览器也认，但加了更规范）。
-
ul > li：只选中<ul></ul>下一级的<li>，不选嵌套在内部<ul></ul>里的<li> -
.container > p：只选中 class 为container的元素的**直系<p></p>子元素**，不选<p></p>里面的<p></p>或孙子级<p></p>
和后代选择器（空格）的区别
这是最容易混淆的点：
-
div p（空格）是**后代选择器**：匹配div内任意层级的p（子、孙、曾孙…都算） -
div > p（>）是**子选择器**：只匹配div的**第一层子元素中是p的那些**
例如：<div>
<p>A</p>
<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><p>B</p></section>
</div>div p 会选中 A 和 B；div > p 只选中 A。
实际使用注意点
- 子选择器对 HTML 结构敏感——如果中间多了一层包装元素（比如加了个
<div> 或 <code><span></span>），原来匹配的元素就失效了 - 不能省略父元素：单独写
> li是无效语法，必须有明确的父级上下文 - 可以链式使用，如
nav > ul > li > a，精准控制到导航链接这一层
常见误用场景
比如想给卡片容器内的标题加样式，但卡片结构可能是：
<article class="card">
<h3>标题</h3>
<div class="content">
<h3>副标题</h3>
</div>
</article>
若写 .card h3，两个 <h3></h3> 都会被影响；而用 .card > h3 就只作用于第一个标题，干净利落。
