如何通过CSS为特定HTML站点修改导航栏header的文字颜色？

问题根因 #

你写的CSS选择器逻辑错误：Site1类是添加在<body>标签上的，并非添加在<header>标签上，也不是<body>的类名包含header。

• body.header.Site1的匹配逻辑是：选中同时拥有header类、Site1类的<body>元素，和你的实际DOM结构完全不匹配
• header.Site1的匹配逻辑是：选中拥有Site1类的<header>元素，和你的实际DOM结构不匹配

正确实现方案 #

你需要选中「带有Site1类的<body>下的所有<header>元素」，对应选择器写法如下：

/* 匹配body是Site1类下的header，修改其文字颜色 */
body.Site1 header {
  color: #fff;
}

/* 如果导航栏里有<a>链接标签，需要额外加这个规则，因为a标签默认自带颜色，不会继承父级color属性 */
body.Site1 header a {
  color: #fff;
}

如果还有更具体的导航类（比如你给导航加了.nav类名），也可以把选择器写得更精准，避免误伤其他header：

body.Site1 header .nav {
  color: #fff;
}

补充说明 #

如果还是不生效，可以打开浏览器F12开发者工具，选中对应的导航文字元素，查看「样式」面板里的生效规则，排查是不是有更高优先级的CSS规则覆盖了你写的样式，如果有可以通过增加选择器权重或者调整选择器优先级解决，非必要不推荐用!important强制覆盖。

内容的提问来源于stack exchange，提问作者ZATA