为什么 Bootstrap 的 CSS 覆盖了我的 CSS？

Question

在我的 HTML 文档中，我首先列出 Bootstrap CSS，然后是我的 CSS 文件。然而，我的一些规则被忽略了，在开发者工具中我可以看到 Bootstrap 的 CSS 正在通过我的 CSS 将他们的规则放在 DevTools 的顶部 window。我的HTML的头是这样的...

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" />
<title>Fictional Shop</title>
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!--Fonts-->
<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
<!--My CSS-->
<link rel="stylesheet" type="text/css" href="./styles/header.css" />
<link rel="stylesheet" type="text/css" href="./styles/footer.css" />
<link rel="stylesheet" type="text/css" href="./styles/homePage.css" />
<link rel="stylesheet" type="text/css" href="./styles/aboutPage.css" />
<link rel="stylesheet" type="text/css" href="./styles/productDetails.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />

任何线索为什么 Bootstrap 在我首先声明它时会压倒我的 CSS，然后再自定义 CSS 文件？

Answer 1

在您的样式中使用 !important 覆盖 Bootstrap。 Bootstrap 样式中可能有 !important 覆盖您的样式，即使您的样式在 Bootstrap CSS 之后加载。 !important 样式适用于你的 HTML 如果你没有在你的样式中使用 !important（当 Bootstrap 有）。

Answer 2

这将是一个特殊性问题，级联（CSS files/selectors 的顺序）只是如何应用哪些属性和样式的一个方面。如果 Bootstrap 定义了 #one .two 而您定义了 .two，则 #one .two 定义的任何属性将覆盖 CSS 中 .two 定义的属性。 #one .two 的特异性是 0 1 1 0 而 .two 是 0 0 1 0。这些数字的优先级从左到右。对于 .two，第二个数字是 0，对于 #one .two，第二个数字是 1。您的风格不太具体，不会得到应用。

如果您运行在使用 !important 的 Bootstrap 选择器中属性，您还必须为 [=37] 使用 !important =].否则以其他方式增加特异性并尽可能避免 !important。

此外，考虑将所有 CSS 个文件合并到一个文件中。

Answer 3

在覆盖的 styles/CSS 中使用 !important，但这是一个临时解决方案，不是好的做法。更改文件的顺序，例如在 header 中从上到下移动 bootstrap link。希望这有效！

为什么 Bootstrap 的 CSS 覆盖了我的 CSS？

Why is Bootstrap's CSS overwriting my CSS?

html

css

twitter-bootstrap

react-bootstrap