提问者:小点点

CSS和Bootstrap优先级混淆


我有一个自定义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代码不能正常工作。

这是怎么回事?


共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文件更具体。