页面级页眉颜色定制须将CSS变量声明在body或带页面ID的容器上，而非:root；因:root为全局作用域，同名变量会被所有页面继承，无法真正隔离，故需用body#page-home等ID选择器定义局部变量，确保作用域精确控制。
页面级页眉颜色定制，必须把变量声明在 body 或带页面 ID 的容器上，而不是 :root；否则所有页面共用一套值，改一个就全变。
为什么不能只靠 :root 声明页面专属变量
:root 是全局作用域，一旦在其中定义 --header-bg，所有页面都会继承它。你无法靠 CSS 选择器“局部覆盖”:root 里的值——.page-about { --header-bg: #2c3e50; } 这种写法本身有效，但它不是在覆盖 :root，而是在 .page-about 元素上新建一个同名变量，作用域仅限该元素及其后代。
常见错误现象：
- 在
:root里写了--header-bg: #3498db;，又在.page-contact里重写--header-bg: #e74c3c;，但页眉没变色 → 很可能是因为页眉元素没在.page-contact内部，或没用var(--header-bg) - 多个页面共用同一套变量名（如都叫
--header-bg），结果切到联系页时，首页的页眉也跟着变红 → 变量名没隔离，作用域失控
正确做法：用页面 ID 容器 + 局部变量声明
每个页面的 body 应有唯一 ID，比如 <body id="page-home">、<body id="page-about">。变量必须声明在这个 ID 选择器上，且页眉必须是它的后代元素。
立即学习“前端免费学习笔记（深入）”；
示例：
body#page-home { --header-bg: #3498db; }
body#page-about { --header-bg: #2c3e50; }
body#page-contact { --header-bg: #e74c3c; }
header {
background-color: var(--header-bg, #f8f9fa);
}
关键点：
- 变量声明必须在页面容器（如
body#page-xxx）上，不能写在header自身里 —— 否则子元素取不到 -
header必须是该body的后代，不能是兄弟或脱离 DOM 结构 - 回退值（
#f8f9fa）必须是静态颜色，不能嵌套var()，否则 Safari 旧版会失效
JS 动态切换页面主题时，别碰 documentElement
如果页面加载后想用 JS 切换当前页的页眉色，比如用户点了个“深色模式”按钮，应操作当前 body 元素，而不是 document.documentElement。
错误写法：
document.documentElement.style.setProperty('--header-bg', '#1a1a1a');
这会污染所有页面的 --header-bg，因为 :root 是共享的。
正确写法：
document.body.style.setProperty('--header-bg', '#1a1a1a');
或者更稳妥地带上 ID 判断：
const pageId = document.body.id;
if (pageId === 'page-about') {
document.body.style.setProperty('--header-bg', '#2c3e50');
}
注意：
- 不要用
cssText赋值，会清空其他内联样式 - 多个变量一起改，用
Object.assign(document.body.style, { '--header-bg': '#1a1a1a', '--header-text': '#fff' })更安全 - 如果页眉用了 Shadow DOM，变量不会自动透入，得显式加
inherit或用::part()
命名冲突和维护隐患最容易被忽略
很多人图省事，给所有页面都用 --header-bg，结果某天加了个新页面，忘了声明变量，页眉就变成透明或继承了前一页的值。这不是 bug，是变量作用域管理松散的必然结果。
建议方案：
- 强制加页面前缀：
--home-header-bg、--about-header-bg，彻底避免跨页干扰 - 在构建阶段用 PostCSS 或构建脚本自动生成页面变量块，减少手写遗漏
- 如果页眉是独立组件（比如 Web Component），变量应声明在
:host上，并通过exportparts控制透出范围
真正麻烦的从来不是“怎么写”，而是“谁在什么时候能改哪个变量而不影响别人”。作用域不是语法糖，是协作契约。
