时间戳

首页 > 解决方案 > CSS 和 Bootstrap 优先级混淆

html - CSS 和 Bootstrap 优先级混淆

问题描述

我有一个与引导程序一起使用的自定义 CSS。一直以来，我都是在 bootstrap 之前先编写 CSS，然后我意识到你应该在 CSS 之前先编写 Bootstrap。现在我的渲染出现问题，例如字体大小和颜色class=sidenav，尤其是我在 CSS 文件中自定义的Bootstrap 。

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

对于上述情况，我的网页按我想要的方式加载（到目前为止）。我hover的 CSS 中的代码可以正常工作。但是当我尝试自定义其他东西时，它们不起作用。

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

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

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

到底是怎么回事？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

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

尝试使用：

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

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

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

推荐阅读