css - 干扰 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. 订单

听起来您的问题出在第 4 位。这意味着如果您有以下情况:

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

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

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

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

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

将应用白色。