是，现代浏览器默认识别HTML5结构标签，但IE8及以下需html5shiv；CSS不生效主因包括标签未注册、选择器未匹配、优先级被覆盖、框架样式隔离或Shadow DOM限制。
浏览器是否识别了 HTML5 结构标签
HTML5 新增的 <header>、<nav>、<article> 等标签在旧版 IE（尤其是 IE8 及以下）中默认不被识别为块级元素，会导致 CSS 样式（比如 display: block、margin）完全不生效。
- 用开发者工具检查元素，看这些标签是否被渲染为
unknown或直接被忽略（IE8 下常见） - 现代浏览器（Chrome/Firefox/Edge 12+）基本无此问题，但若页面声明了过时的
<!DOCTYPE html>缺失或写错（如写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">），也会退化行为 - 临时验证：在控制台执行
document.createElement('header')，若报错或返回undefined，说明 DOM 未注册该标签（多见于未引入 html5shiv 的老项目）
CSS 选择器是否匹配到真实 DOM 节点
结构标签本身没有默认样式，但容易误以为“写了标签就自动有样式”，结果发现 header { background: #eee; } 没反应——其实是因为选择器没命中。
- 检查是否遗漏了父容器限制，例如只写了
header，但实际 HTML 中是<div class="wrap"><header>...</header></div>，而 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（<style scoped>）、Svelte 或某些微前端方案时，CSS 默认不会穿透到子组件内部的结构标签上。
立即学习“前端免费学习笔记（深入）”；
- Vue 中
<style scoped>下的header只会匹配当前组件根节点的header，不会影响子组件里的<header> - Shadow DOM 中，外部 CSS 默认无法作用于 shadow root 内部节点，需用
::slotted(header)或在 shadow root 内定义样式 - 快速验证：把样式移到
<style>标签中（非 scoped）、或改用<link rel="stylesheet">引入，看是否恢复生效
/* 示例：Vue scoped 下无效 */
<style scoped>
header {
background: #f0f0f0;
}
</style>
<p>/<em> 正确方式之一：深度选择器（Vue 2）</em>/
<style scoped>
::v-deep header {
background: #f0f0f0;
}
</style>很多排查卡在“明明写了样式却没变”，其实问题不在语法，而在环境上下文——是否被框架隔离、是否被重置样式吞掉、是否压根没被浏览器当成合法元素。最稳的起点是：打开 DevTools，选中那个 header 元素，盯死「Computed」和「Styles」两个面板，别猜，看它实际拿到了什么。
