CSS 和 Bootstrap 优先级混淆答案

【问题标题】：CSS and Bootstrap precedence confusionCSS 和 Bootstrap 优先级混淆
【发布时间】：2021-04-28 22:56:40
【问题描述】：

我有一个用于引导程序的自定义 CSS。一直以来，我的 CSS 都是在 bootstrap 之前编写的，然后我意识到你应该在 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 文件） 我的 CSS 中的 hover 代码可以正常工作。

但是如果我尝试不同的（正确的）href，例如<link rel="stylesheet" href="/website/template/style.css">，我的sidenav 的颜色会消失，但字体大小根据我的 CSS。 我的 CSS 中的 hover 代码无法正常工作。

发生了什么事？

【问题讨论】：

首先确认你的css文件href地址是否正确。然后尝试查找字体大小问题。
@ShashankGb 我已经更新了。正确的地址是第三种情况。
sidenav 的颜色因多种原因（某些颜色覆盖等）而消失。请提供一个最小的可重现代码或为您的问题创建一个 jsfiddle。

标签： html css twitter-bootstrap bootstrap-4

【解决方案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 文件更具体。

【讨论】：

【解决方案2】：

查看您的 href= 的路径，我认为它无法在 html 中呈现，因为它不正确。

如果您指向 index.html 文件所在的同一目录，则无需在模板前面添加 /。

尝试使用：

<link rel="stylesheet" href="./template/styles.css">

./ 指向当前目录。或者你可以试试

<link rel="stylesheet" href="template/styles.css">

【讨论】：