为何无法覆盖通过JavaScript添加至head的CSS文件？

核心原因 #

这是CSS加载顺序+优先级共同作用的结果：

• 手动写在head里的CSS早于body内<style>标签加载，同优先级规则下，后加载的body样式自然能覆盖先加载的head样式。
• JS动态插入到head的样式表，是在页面渲染过程中晚于body内<style>加载的，所以它的同优先级规则会覆盖body里的样式，必须用!important或者内联样式（这俩优先级本身就更高）才能反过来覆盖。

可行解决方案 #

• 调整加载时机/顺序：
  把body内的<style>标签移到页面最底部（</body>标签前），或者通过JS监听动态样式加载完成的事件，之后再插入你要覆盖的样式规则，这样你的样式会最后加载，同优先级下就能直接覆盖动态样式。
• 提升选择器优先级：
  给要覆盖的样式写更具体的选择器，比如给目标元素加上父元素的类名/ID，或者多用一层元素选择器，让你的规则优先级超过动态插入的样式。比如动态样式用.target { color: red; }，你就写.container .target { color: blue; }，不用!important也能覆盖。
• 保留现有有效方式：
  如果上面两种方法对你的场景来说太麻烦，继续用!important或者内联样式就行，这两种方式的优先级本来就远高于普通的类/元素选择器，能稳定覆盖动态样式。

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