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