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

是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跨度实际上根本不在内。

Answer 2

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

元素代表一个段落。它不能包含块级元素（包括本身）。

尝试将元素转换为<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>

CSS后代选择器

2 个答案: