header嵌套不影响语义权重，权重取决于标题元素而非嵌套层数；其作用域由最近的节元素（如section、article）决定，非嵌套深度；ID选择器#header权重远高于header标签；DOM顺序错乱会破坏可访问性，标题须为header内首个有意义内容。

header嵌套是否影响语义权重？

本身不带层级权重，它不参与大纲（outline）生成，也不像

–

那样有固有级别。浏览器和读屏器只看它包裹了什么——尤其是有没有标题元素。嵌套多层

，但内部没

或

，那最内层的

就等于没说清楚“这是哪一节的头”。语义权重来自标题，不是标签层数。

• 嵌套合法，但必须每层都有对应标题：页面级
  含

  ，其内的

  含

  ，再下一级

  含

• 没标题的
  无论嵌几层，都算语义断裂，W3C验证器会警告
• 嵌套不提升SEO权重，搜索引擎不因嵌套次数加权，只认标题文本+结构上下文

如何判断某个header属于哪一级作用域？ 作用域由最近的**节元素（sectioning content）**决定，不是由嵌套深度决定。浏览器会向上查找最近的、

、

、

或

，那个父容器就是当前

的服务范围。

• 首页

  → 服务整页

• 安装指南

  …

  → 只服务该

• 缓存策略

  CDN配置

  → 外层

  管整个

  ，内层

  管子

注意：

不能作为

的父容器——它必须是节元素的直接子元素，否则语义失效。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

ID选择器#header和

标签在CSS中的权重冲突#header是ID选择器，权重为(0,1,0,0)；而header标签选择器权重只有(0,0,0,1)。哪怕你写header header header，权重仍是(0,0,0,3)，远低于一个ID。

• #header nav能轻松覆盖header nav，因为前者权重(0,1,0,1)，后者仅(0,0,0,2)
• 如果用header做样式锚点，别混用ID：要么全用header，要么用header.site-header这类类名组合，避免被#header意外压制
• :where(header)权重为0，纯靠源码顺序生效，不适合用于覆盖ID规则

header嵌套时DOM顺序与可访问性风险 屏幕阅读器按DOM顺序播报，如果嵌套

导致导航块出现在标题之前（比如

<header><nav>...</nav><h2>正文</h2></header>），它就会先读菜单再读标题——逻辑颠倒。
<ul><li>正确顺序：标题必须是<header>内第一个有意义的流内容（<h1>–<h6>优先，其次是<code><p class="subtitle">

）

建议紧跟标题之后，不要前置；搜索框<form></form>可放在标题右侧，但DOM位置仍应在之后

移动端折叠导航时，nav不能从DOM中移除，只能用aria-hidden="true" + inert控制可访问状态

嵌套本身不难，难的是每层都得配得上它的位置——缺一个

，整段结构就塌一角。