CSS 后代选择器

Question

对于这种选择器，“p span”将选择 p 的所有后代元素。

但是下面的代码为什么不起作用呢？

p span { font-weight:bold;color:blue }

<p>
    <p>
        <span>TEXT 1</span>
    </p>
    <p>
        <span>TEXT 2</span>
    </p>
    <span>TEXT 3</span>
    <span>TEXT 4</span>
    <span>TEXT 5</span>
</p>

TEXT 3 - 5 是第一级元素 p 的后代。但是他们为什么不以粗体和蓝色显示呢？ (文本 1 - 2 确实显示了正确的样式)

Answer 1

<p>是 HTML 中的特例标记。您不能将段落嵌入到另一个段落中，打开两个 P 标签会隐式关闭前一个标签。您的代码实际上被解释为:

<p></p>   <---closed by having opened the next <p>
<p><span>TEXT1</span></p>
<p><span>TEXT2</span></p>
<span>3</span>
etc...

因此 3、4、5 跨度实际上不在 <p> 内完全没有。