header标签不参与CSS权重计算，其权重与div相同，仅由选择器写法决定；语义价值体现在HTML结构和辅助技术解析中，不影响CSS数值权重。
header 标签本身不参与 CSS 权重计算
很多人误以为 <header> 是个“高级”语义标签，会在选择器权重中加分——其实它和 <div> 一样，只是普通元素标签。CSS 权重只看选择器写法，不看语义。比如 header h1 的权重是 (0,0,0,2)，跟 section h1 或 div h1 完全一致：两个标签名，d 位 = 2。
真正影响权重的是你写的 selector，不是它包裹的内容是否“更语义”。<header> 不自带 class、id 或内联样式，单独用它选中元素（如 header）永远只有 d=1。
多级嵌套时 header 的层级归属决定语义权重，而非 CSS 权重
所谓“多级嵌套中的权重”，实际指浏览器/读屏软件对结构的理解优先级，不是 CSS 数值。关键看 <header> 所在的最近节元素（sectioning element）：
-
<body><header><h1>首页</h1></header></body>→ 归属整个文档，<h1>是页面主标题 -
<section><header><h2>第三章</h2></header><p>内容...</p></section>→<h2>是该节标题，语义权重高于孤立<h2> -
<article><header><h2>评论</h2><time>2026-06-15</time></header></article>→ 屏幕阅读器会播报“评论，发布于2026-06-15”，上下文完整
没有父级节元素的 <header>（比如直接塞进 <footer> 或 <aside> 里），会被忽略或降权处理——不是报错，而是语义失效。
立即学习“前端免费学习笔记（深入）”；
嵌套 header 会破坏语义链，等同于无效代码
W3C 明确禁止 <header><header></header></header> 这种写法。浏览器会自动“修复”DOM，丢弃内层 <header>，只保留外层。这意味着：
- 你写的
header header h1永远匹配不到东西（因为第二个<header>实际不存在） - 辅助技术无法建立从大到小的导航路径，比如“页面→章节→子节”的跳转会断掉
- SEO 抓取时，内层标题可能被当成孤立内容，失去上下文关联
正确做法是靠父容器区分层级：<section><header><h2>一级</h2></header><section><header><h3>二级</h3></header></section></section> —— 这里是 <section> 嵌套，不是 <header> 嵌套。
真正要算权重的地方：selector 中混用 id/class/标签时
如果你在写类似 #main-header .nav-link header nav a 这样的选择器，权重才需要拆解：
- 1 个 id → a = 1
- 2 个 class（
.nav-link和隐含的header无 class，不算）→ b = 1（仅.nav-link） - 4 个标签名（
#main-header不算标签，.nav-link不算，剩下header、nav、a，还有前面的header是祖先？等等——实际是header nav a，共 3 个）→ d = 3 - 最终权重 (1,1,0,3)
注意：<header> 在这里纯粹是标签名，和 <div> 没区别；它的语义价值只体现在 HTML 结构和辅助技术解析中，不出现在 CSS 计算里。
最常被忽略的一点：哪怕你把 <header> 写得再深、嵌套再复杂，只要 selector 里没写 id 或 class，它就永远卡在 d 位最低档。想提权？加 class，别指望语义标签自动加成。
