CSS 和 Bootstrap 优先级混淆

Question

我有一个自定义 CSS 与引导程序一起使用。 一直以来，我的 CSS 在引导之前先编写，然后我意识到你应该在 CSS 之前先编写引导。 现在我的渲染出现问题，例如字体大小和颜色，特别是我在 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代码无法正常工作。

到底是怎么回事？

Answer 1

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

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

尝试使用：

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

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

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

Answer 2

我认为这样的事情是你的问题。

鉴于此顺序：

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