小编典典

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

html

为什么我们永远不能将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”无法正常工作)。

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


阅读 478

收藏
2020-05-10

共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进行样式设置,而不必分别考虑示例的每个部分。

2020-05-10