Question

我正在尝试使用引导程序和CSS制作导航栏。我尝试了多种方法，但更改了导航栏文本的颜色，但是除内联CSS外，其他任何方法均无效。任何人都可以帮助我解决我的问题。

<!DOCType html>
<html>

<head>
  <title>My Second Class Assignment</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-white">

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="navbar-brand" href="#">
              <img src="image/logo.png" class="d-inline-block align-top" alt="Learn Xpert">
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PAGES</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">BLOG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-blue" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
  </div>
  </nav>

  <!---JavaScript--->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="js/bootstrap.min.js" rel="stylesheet"></script>
</body>

</html>

CSS文件

/* CSS */ 
a{
    color:#ff6347;
    font-size: 20px;
}

Answer 1

使用

引导样式的导航链接

foreach ($order_products as $order_product) {
    $order_product->book->name;
}

因此，要覆盖，您需要在原始样式之后包含相同级别的特异性（或更高级别）。裸锚样式不够具体，无法更改链接样式，这就是颜色不变的原因

More information about css specificity

Answer 2

CSS选择器具有特殊性。您应该避免使用class Base{ foo(param1, param...n){ // code } } class child1 extends Base{ bar(param1, param2, param...n){ super.foo(param1, param2); // specifi code related for child1 } } class child2 extends Base { bar(param1, param2, param...n){ super.foo(param1, param2); // specifi code related for child2 } } Base ob1 = new child1(); ob1.bar(param1,param2,param..n); ob1 = new child2(); ob1.bar(param1,param2,param..n);指令，因为它会使您的代码难以维护和扩展。

相反，您需要为选择器添加等同或更多的特异性：

!important

Answer 3

以这种方式定位

python manage.py migrate

https://jsfiddle.net/lalji1051/xda1sur5/3/

我不知道为什么导航栏的文本颜色没有为我的代码更改？

3 个答案: