Html 家长<；span>；样式不适用于子级<；p>；

如果我有

<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>

一些东西 这是一些东西

更多的东西

嵌套的

标记不再隐藏。虽然我可以将

更改为

以使其正常工作，但我不明白为什么前者会失败

上面是我实际标记的简化版本。更改为

意味着大量返工，因此我想找到一种使用

的方法（或者至少理解其原理）

---

提前感谢

您不能嵌套

标签。在HTML5中，

不能包含

。通过验证器运行代码会告诉您这一点。

以下是解释浏览器的方法：

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

这是一些东西

更多的东西

及

一些东西 这是一些东西

更多的东西

在HTML5中，许多元素不需要关闭（如果浏览器可以通过编程确定应该关闭的位置），因此在第一个示例中，情况就是这样：在p开始之前关闭跨度。
在第二个示例中，如其他人所述，p不能包含其他段落，因此浏览器将在第二个段落开始之前关闭第一个段落

• 使用HTML验证程序。任何错误都可能在浏览器中产生后果，而您不知道哪些错误/如何确定。花时间验证页面比试图在代码中纠正代码中的错误要好；）
• 使用两个同级段落和/或父级

  div

---

首先，

p

元素不能嵌套。在另一个打开后的任何打开

标记都会被浏览器威胁为
，因为
p
的结束标记。而且，
span
元素不能包含
p
元素，所以浏览器必须这样做。这些规则一起产生DOM树，其中第二个和后面的
p
元素不再是
span
的子元素

您应该始终尊重元素以避免此问题。
您不能将放在另一个a
span
元素不能包含
p
元素。您会看到浏览器试图“纠正”您的代码（例如，在p开始之前关闭跨度），可能重复了和其他一些类似的问题
<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 -->