如何告诉页面忽略内部 CSS 以支持外部 CSS？答案

【问题标题】：How do I tell a page to ignore internal CSS in favor of external CSS?如何告诉页面忽略内部 CSS 以支持外部 CSS？
【发布时间】：2015-07-17 17:46:08
【问题描述】：

背景：我正在更新 Rails 应用程序中页面的样式（我希望 rails 部分与此问题无关），并且我在样式标记中添加了内部 CSS。现在我让页面的主要部分看起来像我想要的样子，但是引导导航栏也收到了 CSS 更改，因此导航栏的字体大小和许多其他方面现在都发生了变化，导致与网站的其他部分不一致.

问题：有没有办法告诉页面不要将内部样式应用于导航栏，而是使用外部样式？

【问题讨论】：

除了使用!important，你不能。内联 css 的优先级高于外部 css。
我相信 OP 正在使用直接写入 HTML 页面的样式（即在 <head> 中的 <style> 标记中，而不是像 <div style="....."> 这样的内联样式
“特异性”是这里的热门词汇。你最好学习一下。 developer.mozilla.org/en-US/docs/Web/CSS/Specificity
@isherwood，我会开始阅读，感谢您的链接。 3 天前，我在没有 CSS 知识的情况下确实被抛出了这个问题，所以总是欢迎任何帮助！
我们在这里太重视“敏捷”了，等大炮安装好了。

标签： html css twitter-bootstrap css-specificity

【解决方案1】：

将您的内部 CSS 封装在另一个类中*。即向容器添加一个唯一的类，而不是保存所有“页面的主要部分”，然后将该类附加到您在页面内部编写的选择器之前

DEMO（以下示例）

a { color: green; } /* this style applies to all plain a tags */
.xyz a { color: red; } /* this style only applies to a tags within an xyz class */

<div class="nav">
  <a>I am a green link</a>
</div>
<div class="xyz">
  <a>This is a red link</a>
</div>

*正如上面提到的@isherwood，这将利用specificity 来达到您的目的

【讨论】：

【解决方案2】：

我想出了这两个解决方案：

第一个解决方案是管理链接的顺序。最新定义将应用于页面：

<style>
    body {
        background-color: red;
    }
</style>

<link rel="stylesheet" href="./main.css">

main.css：

body {
    background-color: green;
}

然后页面的主体将是红色背景。

第二个解决方案是使用 JQuery 或其他方式删除 <style> 元素。

P.S.：我不确定第二个解决方案的质量。

【讨论】：

【解决方案3】：

您可以在外部 css 文件中的类上使用 CSS !important 规则，请看下面的示例

.myclass {
  color: blue!important;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p style="color:red;" class="myclass">This is currently using external css </p>


</body>
</html>

【讨论】：