html - 为什么 Bootstrap CSS 会覆盖我的 CSS？

Question

在我的 HTML 文档中，我首先列出 Bootstrap CSS，然后是我的 CSS 文件。然而，我的一些规则被忽略了，在开发者工具中我可以看到 Bootstrap 的 CSS 正在削减我的 CSS，将它们的规则放在 DevTools 窗口的顶部。我的 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 文件之前，Bootstrap 会压倒我的 CSS 吗？

Answer 1

这将是一个特殊性问题，级联(CSS 文件/选择器的顺序)只是如何应用哪些属性和样式的一个方面。如果 Bootstrap 定义了 #one .two 而你定义了 .two，则 #one .two 定义的任何属性都将覆盖 定义的属性code>.two 在你的 CSS 中。 #one .two 的特殊性是0 1 1 0，.two 是0 0 1 0。这些数字的优先级从左到右。 .two 的第二个数字是 0，#one .two 的第二个数字是 1。您的风格不太具体，不会得到应用。

如果您在 Bootstrap 选择器中遇到使用 !important 的属性，您还必须为该属性使用 !important。否则以其他方式增加特异性并尽可能避免 !important。

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