Question

我是编码的新手，我正在尝试使用Bootstrap。但是，我不知道如何用自己的CSS覆盖默认的Bootstrap代码。

我进行了搜索，常见的建议是： 1.在Bootstrap之后链接我自己的样式表。 2.使我的引用比Bootstrap更具体（例如navbar-link a，而不仅仅是a）。 3.在我的CSS中添加！important（应该避免）。

我尝试了所有这些方法，但仍然很难使CSS得以应用。我究竟做错了什么？有人可以指出正确的方向吗？

以下是使用导航栏和链接的示例。应用了背景色，但a元素的所有样式均不起作用。我尝试了各种等级的更加具体的方法，但似乎都没有效果。

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- my css below-->
    <link rel="stylesheet" href="CSS/main.css" type="text/css">

    <title>ML</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <a class="navbar-brand" href="index.html"><img src="img/logo-small.png" alt="Logo"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS

body {
    background-color: #3c896d;
}

.navbar-light .navbar-nav .nav-link a:visited {
    color: #3c896d;
}

.navbar-light .navbar-nav .nav-link a:hover {
    color: #db5461;
}

.navbar-light .navbar-nav .nav-item .nav-link a {
    color: #db5461;
}

Answer 1

您拥有正确的样式。之所以看不到样式被应用，是因为您没有在CSS中正确定位选择器。例如，

.navbar-light .navbar-nav .nav-item .nav-link a

应更改为

.navbar-light .navbar-nav .nav-item .nav-link

您无需在.nav-link之后定位“ a”标记。当您在CSS选择器之间添加空格时，例如“ .navbar-light .navbar-nav”，这意味着您正在选择所有包含父类“ .navbar-”的包含类“ navbar-nav”的子节点。光”。

在您的情况下，您拥有“ .navbar-light .navbar-nav .nav-item .nav-link a”，因此浏览器会查找“ .nav-”下的所有<a>标签/选择器链接”选择器。在这种情况下不存在。相反，您有一个<a>标记，该标记本身具有“ nav-link”类（而不是其子元素）

这是一篇很棒的文章，可以帮助您了解如何正确定位CSS选择器，以便您可以应用正确的样式。

https://css-tricks.com/whats-the-difference/

关于您的答案，这是CSS应该更改为的

body {
    background-color: #3c896d;
}

.navbar-light .navbar-nav a.nav-link {
    color: #3c896d;
}

.navbar-light .navbar-nav a.nav-link:hover {
    color: #db5461;
}

.navbar-light .navbar-nav .nav-item .nav-link {
    color: #db5461;
}

覆盖Bootstrap CSS（链接颜色）

1 个答案: