《CSS 选择器世界》第四章 [ 4.2.1 子选择符和后代选择符的区别 ] 给出示例不足以表达这一章节的含义，反而容易让人难以理解

[CCaiZi]

css选择器世界 第四章(4.2.1).md

[CCaiZi]

作者想表达"子选择符只会匹配第一代子元素，而后代选择符会匹配所有的子元素。"这一观点。

文中的示例如下:

HTML：

<ol>
    <li>颜色是？</li>
    <li>颜色是？
        <ul>
            <li>颜色是？</li>
            <li>颜色是？</li>
        </ul>
    </li>
    <li>颜色是？</li>
</ol>

CSS：

ol li {
    color: darkblue;
    text-decoration: underline;
}
ol > li {
    color: lightblue;
    -webkit-text-decoration: underline wavy;
    text-decoration: underline wavy;
}

• 这个示例所产生的效果，实际上是写在后面的 ol > li ，覆盖了写在前面的 ol li ，才实现出来的。

如果去掉写在前面的 ol li ，就会发现所有的 <li> 都改变颜色，而这又不符合"子选择符只会匹配第一代子元素",所以这个示例列举有问题。

下面这种情况就能解释 "子选择符只会匹配第一代子元素"。 如下:

HTML:

<h2>这是一段<strong>测试</strong>句子,请注意<strong>观察</strong>两段话。</h2>

<hr>

<h2>这是一段<em><strong>测试</strong></em>句子,请注意<strong>观察</strong>两段话。</h2>

CSS：

h2 > strong {color:red;}

• <h2> 标签会只匹配第一代子元素<strong>，所以，上面一段话的"测试"和"观察",这两个字都被改变了颜色；
• 而下面一段话中，由于"测试"前面包裹着其他标签，这里的 <strong>没有被匹配到，而后面的"观察"符合<h2> 标签匹配第一代子元素<strong>，因此"观察"这两个字也被改变颜色。

现在的问题是，为什么原著示例中所有<li>都被改变颜色，而不是第一代子元素被改变颜色呢？

[zhangxinxu]

感谢反馈，很好的反馈，我会在下一版中采纳你的建议。

[robertYang1024]

我也没明白 为啥 ol > li 会选中所有的，连 ul 的子元素也选中了，要选中ul 的子元素 不应是 ul > li 吗？

[zhangxinxu]

我又看了下这个案例，这个案例颜色不是重点，重点是下划线，新版我会把颜色去掉，减小干扰。

[qijizh]

不是作者举例还真没注意到text-decoration是累加的，但这个特性用来作为此处的例子真的很绝妙，有种作者在刻意找最佳例子的感觉，真的很用心。