后代

CSS 中的后代选择器是任何在两个选择器之间带有空格但不带组合器的选择器。以下是一些示例。

ul li {  }
header h2  {  }
footer a  {  }
.module div {  }
#info-toggle span  {  }
div dl dt a  {  }

以 ul li { } 为例。这意味着“任何作为无序列表后代的列表项”。

后代意味着 DOM 树中任何嵌套在其中的位置。可以是直接子节点，也可以是五级嵌套，它仍然是后代。这与 子节点组合器 (>) 不同，子节点组合器要求元素是下一级嵌套级别。

为了说明，div span { } 将匹配

<div>
  <span>I will match</span>
  <ul>
    <li>
       <span>I will match too</span>
    </li>
  </ul>
</div>

您可能不必太担心它，但后代选择器非常“昂贵”——这意味着渲染引擎很难/很慢地找出并进行操作。 MDN:

后代选择器是 CSS 中最昂贵的选择器。它非常昂贵——尤其是当选择器位于标签或通用类别时。

但只是与其他选择器相比。它仍然非常快，除非您疯狂使用，否则您可能永远不会注意到它。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	任何	任何	任何