Question

在我的HTML文档中，我列出了Bootstrap CSS FIRST，然后是我的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文件之前首先声明它时会压制我的CSS？

Answer 1

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

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

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

Answer 2

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

Answer 3

在覆盖的那些样式/ CSS中使用!important，但这是一个临时解决方案，这不是一个好习惯。更改文件的顺序，如标题中从上到下移动bootstrap链接。希望这有效！

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

3 个答案: