如何在共用同一份CSS的另一个HTML文件中修改CSS声明？

不用新增CSS文件的话，有几种简单可行的实现方式：

方案1：给页面加专属类，扩展现有CSS #

在index2.html的根元素（比如<body>）上添加独有的类名：

<body class="page-index2">

然后在共用的CSS文件末尾添加一段优先级更高的样式规则：

.page-index2 #bg {
  background: #348cb2 url("images/anotherImage.jpg") bottom left;
}

类选择器+ID选择器的优先级高于单独的ID选择器，这段样式会自动覆盖index2.html中#bg的原有背景设置，index.html不受任何影响。

方案2：直接给元素加内联样式 #

在index2.html的#bg元素上直接写内联样式，利用内联样式最高优先级的特性覆盖外部CSS：

<!-- 只修改背景图，保留原有颜色、位置、重复规则 -->
<div id="bg" style="background-image: url('images/anotherImage.jpg');"></div>

如果需要直接替换完整的background属性，也可以这么写：

<div id="bg" style="background: #348cb2 url('images/anotherImage.jpg') bottom left; background-repeat: repeat-x;"></div>

方案3：用JavaScript动态修改 #

在index2.html的页面底部添加一段脚本，动态修改元素样式：

<script>
// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const bgElement = document.getElementById('bg');
  // 方式1：仅修改背景图
  bgElement.style.backgroundImage = "url('images/anotherImage.jpg')";
  // 方式2：替换完整background属性
  // bgElement.style.background = "#348cb2 url('images/anotherImage.jpg') bottom left";
});
</script>

这种方式无需修改CSS或HTML结构，适合需要动态切换样式的场景。

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