17370845950

子选择器（>）只匹配某元素的直接子元素，不匹配更深层的后代；基本格式为“父元素 > 子元素”，如 ul > li 或 .container > p，区别于后代选择器（空格），且对HTML结构敏感。

避免误选孙级元素">

用 子选择器（>），它只匹配某元素的**直接子元素**，不穿透到更深层的后代（比如孙子、曾孙等）。

子选择器的基本写法

格式为：父元素 > 子元素。中间的 > 两侧建议留空格，提高可读性（虽然不加空格浏览器也认，但加了更规范）。

• ul > li：只选中
  下一级的
• ，不选嵌套在内部
  里的
• .container > p：只选中 class 为 container 的元素的**直系
  子元素**，不选
  里面的
  或孙子级

和后代选择器（空格）的区别

这是最容易混淆的点：

• div p（空格）是**后代选择器**：匹配 div 内任意层级的 p（子、孙、曾孙…都算）
• div > p（>）是**子选择器**：只匹配 div 的**第一层子元素中是 p 的那些**

例如：

A

实际使用注意点

• 子选择器对 HTML 结构敏感——如果中间多了一层包装元素（比如加了个 或 ），原来匹配的元素就失效了
• 不能省略父元素：单独写 > li 是无效语法，必须有明确的父级上下文
• 可以链式使用，如 nav > ul > li > a，精准控制到导航链接这一层

常见误用场景

比如想给卡片容器内的标题加样式，但卡片结构可能是：

  
标题
  
    
副标题
  

若写 .card h3，两个

都会被影响；而用 .card > h3 就只作用于第一个标题，干净利落。