CSS 选择器中，空格和>符号的区别

在 CSS 选择器中，空格和**>**符号的区别在于它们选择元素的层级关系：

1. 空格（后代选择器）

• 语法：A B
• 作用：选择 A 元素内的所有后代元素 B（无论嵌套多少层）。
• 示例：

  <div class="parent">
    <p>直接子元素</p>
    <ul>
      <li>嵌套子元素</li>
    </ul>
  </div>
  

  .parent p { color: red; } /* 选中所有 <p>（包括直接和嵌套的） */
  

2. >（子选择器）

• 语法：A > B
• 作用：仅选择 A 元素的直接子元素 B（仅第一层嵌套）。
• 示例：

  .parent > p { color: blue; } /* 仅选中直接 <p>，不选中 <li> */
  

关键区别

使用建议

• 用空格：当需要匹配嵌套较深的元素，或对层级不敏感时。
• 用 >：当需要避免样式意外应用到深层子元素时（如重置列表样式）。

示例对比

/* 选中所有列表项（包括嵌套的） */
ul li { color: gray; }

/* 仅选中直接子列表项 */
ul > li { font-weight: bold; }

通过合理选择符号，可以更精准地控制 CSS 的作用范围。