为什么我们永远不能将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进行样式设置,而不必分别考虑示例的每个部分。