'ul'元素永远不能是'p'元素的子元素

Question

为什么我们永远不能将ul元素作为元素的子p元素？

我用以下代码制作了一个网页

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

在这里，ul元素是p元素的子元素。但是，在所有主流浏览器（Chrome，Firefox和Internet Explorer-所有最新版本）中，其解释如下

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

我通过右键单击ul元素（在Chrome中）并选择检查元素选项来对其进行检查。我在Chrome中看到了它，但是其他两个浏览器的行为也相同（CSS选择器“
p ul”无法正常工作）。

为什么会这样呢？在一般情况下，浏览器会进行此类更改吗？

Answer 1

请检查HTML规范，该规范明确指出禁止将列表放入段落元素，并提供一些示例说明如何执行：

列表元素（尤其是ol和ul元素）不能是p元素的子元素。因此，当句子包含项目符号列表时，您可能会想知道如何标记它。

例如，这个奇妙的句子包含与

• 巫师，

• 比轻快的旅行，以及

• 心灵感应

并在下面进一步讨论。

解决方案是认识到用HTML术语表示的段落不是逻辑概念，而是结构性概念。在上面的奇妙示例中，此规范实际上定义了五段：在列表前一个，每个项目符号一个，在列表后一个。

因此，以上示例的标记可能是：

   <p>For instance, this fantastic sentence has bullets relating to</p>
    <ul>
        <li>wizards,  
        <li>faster-than-light travel, and  
        <li>telepathy,
    </ul>
    <p>and is further discussed below.</p>

希望方便地样式化由多个“结构”段落组成的“逻辑”段落的作者可以使用div元素代替p元素。

因此，例如，上面的示例可能变为以下示例：

    <div>For instance, this fantastic sentence has bullets relating to
    <ul>
      <li>wizards,  
      <li>faster-than-light travel, and  
      <li>telepathy,
    </ul>
   and is further discussed below.</div>

这个示例仍然有五个结构段落，但是现在作者可以仅对div进行样式设置，而不必分别考虑示例的每个部分。