是，现代浏览器默认识别HTML5结构标签，但IE8及以下需html5shiv；CSS不生效主因包括标签未注册、选择器未匹配、优先级被覆盖、框架样式隔离或Shadow DOM限制。

浏览器是否识别了 HTML5 结构标签

HTML5 新增的

• 用开发者工具检查元素，看这些标签是否被渲染为 unknown 或直接被忽略（IE8 下常见）
• 现代浏览器（Chrome/Firefox/Edge 12+）基本无此问题，但若页面声明了过时的 缺失或写错（如写成 ），也会退化行为
• 临时验证：在控制台执行 document.createElement('header')，若报错或返回 undefined，说明 DOM 未注册该标签（多见于未引入 html5shiv 的老项目）

CSS 选择器是否匹配到真实 DOM 节点

结构标签本身没有默认样式，但容易误以为“写了标签就自动有样式”，结果发现 header { background: #eee; } 没反应——其实是因为选择器没命中。

• 检查是否遗漏了父容器限制，例如只写了 header，但实际 HTML 中是
  ...
  ，而 CSS 写成了 .wrap header 却忘了加
• 确认元素是否被 JavaScript 动态移除或替换了（比如 Vue/React 渲染后原始标签已不存在）
• 用开发者工具「Computed」面板查看该元素最终计算出的 display 值，若为 inline，则需显式设 display: block 或 display: flex

样式被更高优先级规则覆盖

CSS 优先级不是靠“写得晚”决定的，而是由选择器特异性（specificity）和来源共同决定。结构标签名选择器（如 nav）优先级极低（0,0,1,0），很容易被类名（0,1,0,0）或行内样式（1,0,0,0）覆盖。

• 打开开发者工具，在「Styles」面板中观察目标规则是否被划掉（strikethrough）；被划掉即表示被更高优先级规则覆盖
• 避免滥用 !important，先检查是否意外引入了重置库（如 normalize.css 或某些 UI 框架的 base.css），它们可能给 nav 设了 display: inline
• 对比特异性： #main nav > .nav-list > nav；若必须用标签选择器，可加空格提升作用域，如 body nav（0,0,1,1）比单独 nav 高一级

是否启用了 Shadow DOM 或框架 Scoped 样式

在使用 Web Components、Vue（）、Svelte 或某些微前端方案时，CSS 默认不会穿透到子组件内部的结构标签上。

• Vue 中 下的 header 只会匹配当前组件根节点的 header，不会影响子组件里的
• Shadow DOM 中，外部 CSS 默认无法作用于 shadow root 内部节点，需用 ::slotted(header) 或在 shadow root 内定义样式
• 快速验证：把样式移到 标签中（非 scoped）、或改用 引入，看是否恢复生效

/* 示例：Vue scoped 下无效 */

/ 正确方式之一：深度选择器（Vue 2）/

很多排查卡在“明明写了样式却没变”，其实问题不在语法，而在环境上下文——是否被框架隔离、是否被重置样式吞掉、是否压根没被浏览器当成合法元素。最稳的起点是：打开 DevTools，选中那个 header 元素，盯死「Computed」和「Styles」两个面板，别猜，看它实际拿到了什么。