Html I'；m无法通过导航栏上的引导更改默认样式_Html_Css_Twitter Bootstrap

Html I'；m无法通过导航栏上的引导更改默认样式

html css twitter-bootstrap

Html I'；m无法通过导航栏上的引导更改默认样式,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图通过使用一个单独的css文件将默认导航栏的外观从引导更改为服装外观的导航栏，但这些更改不适用。我已经在引导文件之后链接了css文件，但是我仍然不能改变导航栏的外观。知道为什么会这样吗？代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="I

我试图通过使用一个单独的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>

覆盖BS本机样式的最佳方法是对要更改的元素更加具体：

例如，如果要覆盖BS的

.navbar brand

类，请选择树上更高的选择器（父级），并在编写CSS时将其用作父/子选择器：

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

还要确保自定义CSS文件在BS之后被引用

注意：使用上述技术将确保您不必使用

！重要信息

覆盖引导。我强烈建议您使用

！重要的

只有当所有其他端口都失败时，它才不应该是第一个调用端口

例如：

正如您从我提供的JSFIDLE中所看到的，我只使用了以下内容：

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

类为

.navbar default

的元素现在的

背景色为红色
，而不是BootStrap的本机#f8f8
要从另一个样式表覆盖CSS，您可以：
在要覆盖的CSS文件之后添加CSS文件（您可以
在头中的标记中

确保CSS定义/规则是正确的
与要覆盖的完全相同，例如，如果
.nav>.nav默认值

你必须有同样的规则
使用！重要的例如。
颜色：#000000！重要的

数字3是最重要的
添加！重要信息
到您要覆盖的css代码的每行末尾都应该可以工作。您的代码很好。尝试清除浏览器缓存。这是您的代码，工作正常。我可以通过添加其父元素来改变.navbar品牌，但是.navbar的父元素是我所能理解的唯一主体，它不会改变任何东西。@geogekech甚至添加body.navbar
都会使其特异性比BS的原生元素更高。还可以尝试使用nav。navbar
不起作用。唯一改变外观的是当我使用.nav时，但它不正确。看起来它只为容器中包含的零件设置样式。@GeorgeKech。navbar inverse
可能会覆盖它。尝试nav.navbar.navbar inverse
@GeorgeKech，或者尝试删除.navbar inverse？
.parent .navbar-default {
  background-color: red;
}