对于这种选择器,“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 确实显示了正确的样式)
最佳答案
<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>
内完全没有。
关于CSS 后代选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9756031/