CSS后代选择器解析：descendant定义及HTML匹配验证咨询

1. 术语解释：Descendant（后代）具体指什么？ #

在CSS选择器的术语体系里，后代元素指的是嵌套在某个元素内部的所有层级元素——不管是直接嵌套的下一级（也就是子元素），还是更深层级的孙子、曾孙元素，都属于该元素的后代。

拿你给出的子元素示例来说：<ol>的直接子元素是<li>，但如果<li>里面还有<p>或者<span>，那这些元素既是<li>的子元素，同时也是<ol>的后代元素。简单说，子元素是后代元素的一个子集，后代包含所有嵌套层级的元素。

2. 给定HTML代码是否匹配指定CSS选择器？ #

先明确目标CSS选择器的匹配规则：

div ol>li p

这个选择器要找的是：

• 一个<p>元素，且它是某个<li>的后代
• 该<li>必须是<ol>的直接子元素（>代表子元素选择器，只匹配直接嵌套的下一级）
• 该<ol>必须是<div>的后代

再看你提供的HTML代码：

<div><span>mixtures<span/></div>
<ol>
    <li>sugar</li>
    <li>milk</li>
</ol>
<p>Stir both mixtures together.</p>

这里的<ol>和<div>是同级元素，并非嵌套在<div>内部；同时<p>元素是根层级元素，没有嵌套在任何<li>里面。完全不符合选择器的匹配条件，所以不匹配。

内容的提问来源于stack exchange，提问作者rozerro