如何与Bootsttrap一起使用另一个样式表？

Question

我的主要样式表是这个：

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

但是，每当我向HTML文件中添加新样式表时，我的主CSS就会被覆盖。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

如何在不覆盖我的主要CSS的情况下将Bootsttrap样式表添加到HTML中？

Answer 1

您需要了解CSS优先级，浏览器按以下顺序评估和应用CSS规则：

1. 内联css（html样式属性）覆盖样式标签中的css规则 和CSS文件。

2. 更具体的选择器优先于较不具体的选择器。

3. 如果两个规则都出现在代码的后面，则这些规则会覆盖前面的规则 具有相同的特异性。

4. 带有！important的css规则始终优先。

因此，您应该最后加载自定义的CSS，以便它覆盖引导程序中的相似样式。还尝试为特定元素创建自定义CSS。最后，建议使用!important，因为它是不好的做法，因此不太值得推荐。

为进一步参考，我建议看一下MDN documentation。

Answer 2

可能发生的是，您在后一个CSS文件中定义的样式将覆盖您在前一个CSS文件中定义的样式。

要寻找的具体症结是克里斯蒂安·科罗拉多提到的内容。

我只是在澄清，您的第二个链接很可能实际上并未覆盖第一个链接（如果您想要2个样式表，实际上，您可以像完成操作一样定义两个不同的链接。可能值得研究将样式合并为一张表格，但从技术上讲，应该同时加载css文件）。只需仔细查看您的实际样式即可（例如，“！important”将覆盖没有“！important”的样式），并注意最后加载哪种样式。