Html Custom.css不会覆盖bootstrap.min.css

当我包含css/bootstrap.min.css时，它会覆盖我网站的一些元素，如“a”标记、我的.nav栏和网站上使用的字体。 装载顺序：

<link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="custom.css">
    <link rel = "stylesheet" href = "styl.css" type = "text/css" />
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

---

这是我第一次使用bootstrap创建响应式站点。

如果您的CSS文件是公开的/CSS，您应该写：

编写href时，开始文件夹为

public

。阅读更多关于它的信息

此外，第3行缺少一个e：

---

->

是否在css文件夹中？欢迎使用堆栈溢出！你能把你覆盖的css和文件夹结构一起发布吗？另外，请注意，您在第三行的

href=“styl.css”

中缺少一个e。是的，它的css文件夹“styl.css”基本上是“custom.css”。我复制它是为了检查它是否会做任何事情。custom.css不在css文件中。在这种情况下，请在custom.css中发布css，以及您看不到css的html元素。它链接正确，如果我把所有东西都注释掉，看起来很好

a{color:white；text-decoration:none；display:block；}

把它和HTML一起发布到你的问题中

<div class="wrppr">
        <div class="header">
            <div class="logo">
                <img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
                <span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
                <div style="clear:both"></div>
            </div>
        </div>
        <div class="nav">
            <ul>
                list here
        </div>
        <div class="image">
            <img src="tatofront.jpg" style="opacity: 0.6"/>
        </div>

        <div id="opis">
        <p></p>
        </div>
        <div style="clear:both"></div>

        <div id="option2">
            <a href="#">
                <div id="ig">
                    <i class="icon-instagram"></i>
                </div>
                <div class="txt">Sprawdź naszego Instagrama!</div>
        </a>

    <script src="https://snapwidget.com/js/snapwidget.js"></script>
    <iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden;  width:100%; "></iframe>
        </div>
        <div style="clear:both"></div>
            <div id ="option3">
                <div class="logobot">
                    <img src="duda.jpg" style="height: 300px; width: 300px;">
                </div>
                Tu opis o pierciengu i cennik
            </div>
        <div style="clear:both"></div>
        <div id ="option4">
                <div class="logobot">
                    <img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
                </div>
                Tu opis o dreadach i dreadlockach
            </div>
        <div id="option5">  
            <div class="logobot">
                <img src="LOGO.png" style="height: 300px; width: 300px;">
        </div>
        <div style="clear:both"></div>
        <div class="footer">
            VOODOO DOLL INK
        </div>

    </div>

a { 
  color: white; 
  text-decoration: none; 
  display: block; 
}
.logo
{
    font-weight: bold;
    vertical-align:middle;
    width: 1000px;
    font-size: 72px;
    text-align: middle;
    margin-left:auto;
    margin-right:auto;
}
.nav
{
    padding: 10px;
    width:auto;
    border-top: 1px solid rgb(38, 38, 38);
    border-bottom: 1px solid rgb(38, 38, 38);
    top: 0px;
    z-index: 100;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    text-align: center;
    background-color:#0a0a0a;
}