Question

无论出于何种原因，我似乎无法将自定义stulesheet链接到HTML索引。 Bootstrap和Font Awesome样式可以很好地工作

我的HTML IS是：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">

  <!--  start of scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jquery -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- (bootstrap3) Latest compiled and minified JavaScript -->
  <!--  end of scripts -->

  <!-- start of stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <!-- (bootstrap3) Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- (bootstrap3) Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- end of stylesheets -->
</head>
  <body>
  </body>
</html>

CSS是：

body {
    background-color: lightblue;
}

文件结构是：

/root
  /css
    -style.css
  /js
    -scripts.js

  -index.html

Answer 1

将自定义样式表放在head中的引导样式表之后。浏览器会读取，因此自定义内容总是最后的。在您的代码中，Bootstrap始终优先于您的自定义样式。

<link rel="stylesheet" type="text/css" href="css/style.css">

Answer 2

你需要了解一些关于CSS的知识。您的样式表由您添加的订单读取。因此，您应该在最后添加自己的CSS文件，以防止它们被先前的CSS文件覆盖。

如果你有

第一个CSS文件中的

.bg{background:red}和
最后一个CSS文件中的.bg{background:green}。

每当您向元素添加.bg时，背景颜色将为绿色而不是红色。

Answer 3

或者您可以将自定义CSS标记为！important：

body {
    background-color: lightblue !important;
}

更多关于特异性的信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

样式表对html没有影响（但引导样式工作）

3 个答案: