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

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

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

回答:

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

以上是 &#39;ul&#39;元素永远不能是&#39;p&#39;元素的子元素 的全部内容, 来源链接: utcz.com/qa/408305.html

回到顶部