CSS 嵌套元素的隐藏规则
简单介绍一下，在 HTML 和 CSS 中，元素大体分为 块级元素、内联元素（行内元素）、块级内联元素（行内块元素）。它们有着不同的嵌套规则和特殊之处。
1. 行内元素
行内元素特点：不独占一行、不可设置宽高、内容决定元素所占位置、不会打断上下文流畅。
包括<span>、<a>、<img>、<strong>、<em>等。
嵌套规则：只能嵌套行级元素，即行级元素内部只能包含其他行级元素，不能包含块级元素。
举个 🌰
正常的渲染：
非正常的渲染：
按道理来说，浏览器应该将 div 元素从 span 元素中移除，但实际没有。
虽然将 div 放在 span 中违反了 HTML 的规范，，但现代浏览器的错误处理机制，不会强制移除或改变这种结构，而是尽力按照嵌套结构正常渲染页面。这是因为：
1、浏览器宽容度高：为了尽可能显示开发者意图，浏览器会尽量渲染不符合标准的 HTML。
2、没有特定语义冲突，只是嵌套不符合规范。
2. 块级元素
块级元素特点：独占一行、可以设置宽高。
包括：<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li>等。
嵌套规则：可以嵌套任何元素。块级元素内部既可以包含其他块级元素，也可以包含行级元素。
举个 🌰
3. 特殊规则
3.1 p 标签内不能嵌套 div 元素
当我们在 p 标签内嵌套一个 div 元素时，浏览器会自动将 div 元素移出 p 标签，并将 p 元素拆分为两个独立的段落。
举个 🌰
<p>
这是段落的开始部分。
<div>这是一个块级元素。</div>
这是段落的剩余部分。
</p> 渲染结果：
3.2 a 标签不能嵌套 a 标签
在 HTML5 规范中，<a> 标签不允许嵌套另一个 <a> 标签。
举个 🌰
<body>
<a href="#">
外层 a 标签的内容
<a href="#"> 内层 a 标签的内容</a>
</a>
</body>
浏览器解析：a 标签内部不允许嵌套另一个 a 标签。这是因为 a 标签定义的是一个超链接区域，嵌套的 a 标签会导致 HTML 语法和功能上的混乱。浏览器遇到这种情况，会将内部的 a 标签自动移到外部。
3.3 table 标签内的结构
table 标签只能包含特定的子元素，如 thead、tbody、tr、td 等。如果不合法的元素直接在 table 中，浏览器会自动将其移出 table，指定元素保留。
举个 🌰
<table>
<tr>第一行</tr>
<div>不合法的元素</div>
<tr>第二行</tr>
</table>渲染如下：
3.4 head 标签内的非元数据元素
head 标签通过包含页面的元数据（如 meta、title 等）。如果在 head 内插入非元数据元素（如 div、p 等），浏览器会将其移动 body 中，保证文档结构的正确性。
举个 🌰
<head>
<title>页面标题</title>
<div>不合法的内容</div>
</head>渲染如下：
