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>.