Html CSS和引导优先混淆

我有一个自定义的CSS，用于引导。一直以来，我都是在引导之前先编写CSS的，然后我意识到在CSS之前应该先有引导。现在我在渲染方面遇到了问题，例如字体大小和颜色，特别是我在CSS文件中自定义的Bootstrap的

class=sidenav

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

对于以上内容，我的网页加载了我的样式，除了字体大小不同，但是

sidenav

的颜色与第一个场景相同。（即，根据我的自定义CSS文件）my

hover

我的CSS中的代码工作正常

但是如果我尝试不同的（正确的）

href

例如

我的

侧导航的颜色消失但是字体大小与我的CSS一致。我的
悬停
CSS中的代码工作不正常

发生了什么事？
查看href=的路径，我认为它无法在html中呈现，因为它不正确

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

尝试使用：

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



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

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

我认为这是你的问题

根据这一命令：

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

颜色将输出为红色，因为第一个CSS文件更具体。
首先确认CSS文件的href地址正确。然后尝试查找字体大小问题。@ShashankGb我已更新。正确的地址是第三种情况。
sidenav
的颜色由于多种原因（某些颜色覆盖等）消失。请提供一个最小的可复制代码，或者为您的问题创建一个JSFIDLE。
<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; }