Question

我正在尝试使用单独的css文件通过引导程序将默认导航栏的外观更改为服装外观导航栏，但更改将不适用。我已经在引导程序文件之后链接了css文件，但我仍然无法改变导航栏的外观。知道为什么会这样吗？这是代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fashion</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
  <div class="container">
   <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a href="" class="navbar-brand pull-left">Trunk Club</a>
    </div><!-- End of navbar-header -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav pull-right">
        <li><a class="getstarted" href="#howitworks">How it Works</a></li>
        <li><a class="getstarted" href="#whattoexpect">What to Expect</a></li>
        <li><a class="getstarted" href="#stylists">Stylists</a></li>
        <li><a class="getstarted" href="#login">Log In</a></li>
        <li><a class="getstarted" href="#getstarted">Get Started</a></li>
      </ul>
   </div>
   </div>
   </nav>

这是CSS文件：

@charset "utf-8";
/* CSS Document */
body {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
}

.container {
    width: 70%;
    margin: 0 auto;
}

.navbar {
    width: 100%;
    min-width: 800px;
    height: 60px;
    background-color: #151e28;
    text-transform: uppercase;
    color: #FFF;
}

.navbar-brand {
    color: #FFFFFF;
    margin-top: 5px;
    font-size: 28px;
    font-weight: bolder;
    letter-spacing: 1px;
}

ul {

    margin-top: 20px
}

ul li {
    float: left;
    list-style: none;
    color: #878b85;
    margin-left: 20px;
    font-size: 12px;
    font-weight: bold;

}

nav ul li:nth-child(4) {
    border-left: 1px solid #878b85;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: -5px;   
}

nav ul li:nth-child(5) {
    border: 1px solid #878b85;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 7px;
    margin-top: -5px;
}

Answer 1

覆盖BS本机样式的最佳方法是更具体地说明要更改的元素：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

例如，如果要覆盖BS＆＃39; .navbar-brand类，请在树的上方选择一个选择器（父级），并在编写CSS时将其用作父/子选择器：

.parentclass .navbar-brand {
    // CSS properties
}

同时确保您的自定义CSS文件被引用 AFTER BS

。

NB：使用上述技术可确保您不必使用!important 来覆盖BootStrap。我强烈建议您仅在所有其他方法都失败时使用!impotant，它不应该是第一个停靠点。

示例：https://jsfiddle.net/2o4ct6pv/

正如您在我提供的JSFiddle中所看到的，我只是简单地使用了以下内容：

.parent .navbar-default {
  background-color: red;
}

类似.navbar-default的元素现在有background-color red而不是BootStrap的原生#f8f8f8。

Answer 2

要从其他样式表覆盖CSS，您可以：

在您想要覆盖的CSS文件之后添加您的CSS文件已完成） HEAD 标记
确保CSS定义/规则是与您要覆盖的完全相同，例如如果它是

.nav＆gt; .nav默认

你必须有相同的规则

使用！important ，例如

颜色：＃000000！重要

3号是最重要的一个

我无法通过导航栏上的bootstrap更改默认样式

2 个答案: