CSS和Bootstrap优先级混淆

Question

我有一个自定义CSS用于引导程序。一直以来，我都是在bootstrap之前先编写CSS，然后我意识到在CSS之前应该先编写bootstrap。现在我的呈现有问题，例如字体大小和颜色，特别是我在CSS文件中自定义的bootstrap的class=sidenav。

<link rel="stylesheet" href="/template/style.css">
bootstrap CSS

对于上面的内容，我的网页按我想要的方式加载（到目前为止）。CSS中的hover代码正常工作。但当我尝试定制其他东西时，它们就不起作用了。

bootstrap CSS
<link rel="stylesheet" href="/template/style.css">

对于上面的情况，我的网页加载了我的样式，只是字体大小不同，但sidenav的颜色与第一种情况相同。（根据我的自定义CSS文件）我的hover代码在我的CSS中正常工作。

但是，如果我尝试不同的（正确的）href例如 我的sideNav的颜色将消失，但字体大小根据我的CSS而变化。CSS中的hover代码不能正常工作。

这是怎么回事？

Answer 1

我想这是你的问题。

根据这一命令：

<link rel="stylesheet" href="styles1.css" />
<link rel="stylesheet" href="styles2.css" />

# style1.css
.my-class .very-specific .class-selector { color: red; }

# style2.css
.my-class .class-selector { color: blue; }

颜色将被输出为红色，因为第一个CSS文件更具体。