网页嵌套代码
去年帮朋友改一个企业站，网页导航栏死活点不动。嵌套查了半天，代码发现他在 `` 标签里又套了一层 ``。网页浏览器直接懵了，嵌套把外层链接拆得七零八落。代码这种错误，网页写代码的嵌套人多少都犯过。 嵌套本身不复杂，代码就是网页标签一层包一层。但问题在于，嵌套HTML 的代码嵌套规则比大多数人以为的要严格得多。浏览器不会因为你写错了就报错，网页它只会默默猜你的嵌套意图，然后按自己的代码方式渲染。结果就是：你看代码觉得没问题，页面表现却完全不是那回事。 拿 ` ` 标签来说。段落里不能放 ` ` 只能包含 phrasing content（短语内容）。你写了 ` ` 提前闭合，变成 ` 表格的嵌套更让人头疼。` 再说过度嵌套。有人写 HTML 像包洋葱，一层套一层，` 嵌套和 CSS 的关系也值得说。选择器 `.a .b` 和 `.a > .b` 看起来差不多，实际差别很大。前者匹配所有后代，后者只匹配直接子元素。嵌套结构一变，前者可能突然命中你不想命中的元素。这不是理论问题，是每天都在发生的事。写 CSS 的时候，脑子里得清楚 DOM 树长什么样。 框架时代，嵌套换了个形式继续存在。React 的 JSX 里，组件嵌套组件，props 一层层往下传。Vue 的 slot 嵌套，作用域搞不清楚就出 bug。本质上跟 HTML 嵌套是同一件事：你得知道谁包着谁，边界在哪里。工具变了，底层逻辑没变。 有个习惯挺管用：写完一段 HTML，打开开发者工具看一眼实际 DOM。浏览器最终解析出来的结构，才是真正生效的结构。你写的不算数。这跟写文章一样，你觉得你表达清楚了，读者理解成什么样，那是另一回事。 嵌套的规则不复杂，但细节多。不用背，遇到问题查 MDN 就行。关键是养成习惯：写完看一眼 DOM，别让自己的代码骗了自己。 上一篇 下一篇` 的直接子元素只能是 ``、``、``、`
` 这几类。你把 ` ` 里扔了个 `