如何让一个外部样式表拥有更高优先级以覆盖其他冲突样式？

要让你的外部样式表覆盖其他冲突样式，可通过以下几种方式解决：

• 确保样式表加载顺序靠后
  CSS规则中，相同特异性的样式，后加载的会覆盖先加载的。你使用document.head.appendChild(link)的本意是把样式表加到<head>末尾，但如果实际加到了开头，可能是代码执行时机的问题（比如在<head>元素还未完全初始化时执行）。可以确认代码执行时机，或者改用document.head.insertBefore(link, null)（效果和appendChild一致，确保插入到<head>最后位置），保证你的样式表在所有其他样式表之后加载。

• 提升样式选择器的特异性
  如果其他样式的选择器特异性比你的高，即使加载顺序靠后也无法覆盖。可以给你的选择器增加特异性，比如：

  /* 原样式 */
  .page-title { color: #333; }
  /* 提升特异性后 */
  body .page-title { color: #ff0000; }
  

  应急情况下也可以使用!important（不推荐滥用，会增加样式维护难度）：

  .page-title { color: #ff0000 !important; }
  

编辑补充：你已找到问题核心——样式表的加载顺序。确保你的样式表在所有其他样式表之后加载，就能让同特异性的样式生效。若仍有冲突，可通过提升选择器特异性解决。

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