、

、

等）。浏览器遇到时会自动闭合前面的

，再开新标签：

文字 
 内容

实际被解析为：

立即学习 “ 前端免费学习笔记（深入）”；

文字 
 内容

• JS 用 document.querySelector('p') 可能取到空段落
• CSS 的 p > div 选择器完全不生效
• 如果
  原本依赖

  的 padding/margin，布局直接崩

  自闭合标签后面加 会怎样

  像 、、
这类 void 元素，语法上不允许闭合标签。写成：

  @@##@@

  是合法的（XML 风格），但写成：

  @@##@@

  会导致浏览器把 当作未知标签处理，后续所有内容可能被塞进一个隐式 或意外创建的父节点里。常见现象：

  • 后续
    突然变成 的子元素（DevTools 里能看到缩进异常）

  • document.body.children 数量变多，且类型混乱
  • Vue/React 渲染时抛 Hydration failed（服务端 HTML 和客户端 DOM 不一致）

  使用

  时最容易漏掉的中间层

  不允许直接子元素是

  ，必须包裹在

  、

  或

  中。虽然浏览器会自动补

  ，但问题在于：

  • 手动写的 CSS 如 table tr:first-child 可能命中不到预期行（因为 :first-child 是指


  下的第一个

  ，而非整个

  ）

  用 querySelectorAll('tr') 拿到的列表顺序和 DOM 树中真实层级可能不一致（尤其跨多个


  时）

  某些旧版 IE 对自动补全行为不一致，导致表格渲染错位

  稳妥做法：显式写出

  ，哪怕只有一组数据。

  嵌套验证别只靠肉眼 —— 推荐两个轻量手段

  人工检查容易漏，尤其模板拼接或 CMS 输出的 HTML。两个低成本验证方式：

  • 把 HTML 粘贴进 W3C Markup Validation Service，它会明确指出“Element X not allowed as child of element Y”类错误
  • 在 Chrome DevTools 的 Elements 面板中右键 → “Edit as HTML”，然后随便敲个空格再回车——浏览器会立刻重解析并高亮非法嵌套（比如红色虚线框标出被自动拆开的

    ）

  真正麻烦的不是嵌套本身，而是浏览器静默修正后留下的“看起来正常、实则结构已变”的情况。查问题时先看 Elements 面板里的实际 DOM 树，而不是你写的源码。

  

  发表于：前端开发

  2026-02-10

  # chrome# chrome devtools# dom# html# input# js# margin# padding# table# tbody# tr# ul# void# xml# 选择器

  复制链接