我如何告诉页面忽略内部 CSS 而支持外部 CSS？

Question

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

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

Answer 1

将您的内部 CSS 封装在另一个 class* 中。即向容器中添加一个唯一的 class，而不是包含所有 "main parts of the page"，然后将该 class 附加到您在页面内部编写的选择器之前

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 达到您的目的

Answer 2

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

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

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

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

main.css:

body {
    background-color: green;
}

然后页面的正文将是红色背景。

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

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

Answer 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>

我如何告诉页面忽略内部 CSS 而支持外部 CSS？

How do I tell a page to ignore internal CSS in favor of external CSS?

html

css

twitter-bootstrap

css-specificity