'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进行样式设置,而不必分别考虑示例的每个部分。
以上是 'ul'元素永远不能是'p'元素的子元素 的全部内容, 来源链接: utcz.com/qa/408305.html