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