Question

如果我有

<span style='display:none'>
    <p>this is some stuff</p>
    <p>more stuff</p>
</span>

我的嵌套标签已隐藏，正如我所期望的那样。我添加作为父

的那一刻

<p>Some stuff
    <span style='display:none'>
        <p>this is some stuff</p>
        <p>more stuff</p>
    </span>  
</p>

不再隐藏嵌套的标记。虽然我可以将更改为<div>以使其发挥作用，但我不理解 为什么 前者失败。

以上是我实际标记的简化版本。更改为<div>意味着重做很多工作，因此我想找到一种方法来使用（或者至少了解其基本原理）。

提前致谢

Answer 1

您无法嵌套个标签。在HTML5中，无法包含。通过验证器运行代码会告诉你这个。

Answer 2

以下是可以尝试解释浏览器的内容：

<span style='display:none'>
    </span><p>this is some stuff</p>
    <p>more stuff</p>
</span><!-- invalid, no opening tag -->

和

<p>Some stuff
    <span style='display:none'>
        </span></p><p>this is some stuff</p>
        <p>more stuff</p>
    </span><!-- invalid, no opening tag -->
</p><!-- invalid, no opening tag -->

在HTML5中，许多元素不需要关闭（如果浏览器可以通过编程方式确定它应该关闭的位置），那么在第一个示例中，发生了什么：在p开始之前关闭跨度。
在第二个例子中，如其他人所述，p不能包含另一个段落，因此浏览器将在第二个段落开始之前关闭第一个段落。

使用HTML验证器。任何错误都可能会在浏览器中产生影响，并且您不知道哪些错误/如何确定。验证页面的时间比尝试在代码中更正因代码而导致的时间更长;）
使用2个兄弟段落和/或父亲div

Answer 3

首先，p元素不能嵌套。浏览器会在之后通过另一个开放标记任何开始标记，因为p is optional的结束标记。此外，span元素不能包含p元素，因此浏览器必须correct this markup as broken。这些规则一起导致DOM树，其中第二个和后面的p元素不再是span的子元素。

您应始终尊重content models元素以避免此问题。

父<span>样式未应用于子<p> </p> </span>

3 个答案: