Question

请考虑以下代码：

<!DOCTYPE html>
<html>
<head>
<style>
li p {
    background-color: yellow;
}
</style>
</head>
<body>

<li>
  <div>
    <p>
       Usual text.
    </p>
  </div>
</li>
</body>
</html>

常用文字按预期获得黄色背景。现在，如果我在<div>标记内放置一个块级元素<h2>或<p>，则会发生异常情况。块级元素和仍在<p>标记内的块级元素之后的之间的内容不会获得黄色背景。例如。请考虑以下代码，

<!DOCTYPE html> <html> <head> <style> li p { background-color: yellow; } </style> </head> <body> <li> <div> <p> Usual text<div>Text Inside Div</div> After div but inside p. </p> </div> </li> </body> </html>

如果我在<span>标记内使用<a>或<p>之类的内联元素，则不会出现此问题。



为什么这种行为只显示块级元素？

Answer 1

这与CSS无关。这纯粹是HTML问题。

P元素中不允许使用Div元素。

此外，P元素的结束标记是可选的，段落的结尾将由Div开始标记暗示（将P结束标记呈现为孤儿）。

理解`div`和`span`元素作为后代选择器中的子元素的工作

1 个答案: