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>

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

Answer 1

<p>是超文本标记语言中的一种特殊情况。您不能在另一个段落中嵌入段落，打开两个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>中。

Answer 2

来自spec - http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

<p>元素表示一个段落。它不能包含块级元素(包括<p>本身)。

尝试将<p>元素转换为<div>元素。

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

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