不修改HTML文件如何用外部CSS覆盖带!important的内部style标签样式

原理说明 #

• 你引入外部CSS的link标签位置在内部style标签之前，当两个样式的选择器优先级相同、同时都带有!important标记时，浏览器会优先生效后加载的样式，因此你原来的写法不生效。
• 要实现覆盖，只需要让外部CSS的目标选择器优先级高于内部样式的p标签选择器，同时加上!important即可。

可行实现方案 #

以下几种写法都可以直接放到你的外部CSS文件中生效：

方案1：叠加父级标签选择器提权 #

/* 两个标签选择器的优先级高于单个p标签，可实现覆盖 */
body p {
  color: blue !important;
}

如果需要更高的优先级，还可以叠加更多层级：

html body p {
  color: blue !important;
}

方案2：搭配伪类选择器提权（兼容性好，优先级更高） #

/* :not内的ID不存在，不会影响匹配结果，同时ID选择器会大幅提升整体优先级 */
p:not(#non-exist-id) {
  color: blue !important;
}

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