干扰 CSS 的脚本标签答案

【问题标题】：Script tags interfering with CSS干扰 CSS 的脚本标签
【发布时间】：2015-07-21 02:38:32
【问题描述】：

我是网页设计的新手，最近进入了 Bootstrap。我最近也开始使用 Codepen。在 Codepen 中完成一个项目后，我将我的代码从那里复制并粘贴到 Sublime 中，无论出于何种原因，它改变了我页面上的一些内容，即我的页脚和一些文本的 CSS。

现在，无论出于何种原因，我的页脚都很大，而且我的一些文字是金色的。在我的 CSS 中，我没有指定金色文本。当我将 HTML 文件中的 CSS 链接移动到 Bootstrap 的脚本标签下方时，我的页面发生了变化。但无论我将 CSS 链接或脚本放在哪里，我的页面都无法以正确的方式显示。

为什么我的 CSS 链接和 Bootstrap 脚本的位置很重要？它们都在头脑中。

我最近安装了 Emmet，最近也开始玩弄 Github，并在此问题之前将文件推送到 Github。不确定这是否相关。

<meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="realsite/styles.css">

  <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>

【问题讨论】：

总是尽量把脚本标签放在html页面的底部，让所有页面加载更快，避免任何错误

标签： css twitter-bootstrap head

【解决方案1】：

CSS 规范在应用 css 时规定了以下规则：

!重要
规则来源
特异性
订购

听起来第四个是您遇到问题的地方。这意味着如果您有以下情况：

.cssrule {
    color: white;
}
.cssrule {
    color: gold
}

然后颜色将是金色，因为它是指定的最后一条规则。一般来说，根据我的经验，特异性规则是用来解决这个问题的，例如：

#ida .cssrule {
    color: white;
}
.cssrule {
    color: gold
}

在那种情况下，像这样的 div：

<div class="cssrule" id="ida">

将应用白色。

【讨论】：