脚本标签干扰CSS

Question

我是网页设计的新手，最近进入了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'>

Answer 1

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

1. ！重要
2. 规则来源
3. 特异性
4. 顺序

听起来好像是第四个问题。这意味着如果您有以下内容：

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

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

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

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

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

将应用白色。