Перезапись Bootstrap CSS (цвет ссылки) - PullRequest
Новая
       3

Перезапись Bootstrap CSS (цвет ссылки)

0 голосов
/ 01 октября 2019

Я новичок в кодировании и пытаюсь использовать Bootstrap. Однако я не могу выяснить, как переписать код Bootstrap по умолчанию своим собственным CSS.

Я искал, и общие предложения были следующими: 1. Связать мою собственную таблицу стилей после Bootstrap. 2. Сделайте мои ссылки более конкретными, чем Bootstrap (например, navbar-link a вместо просто a). 3. Добавьте! Важное к моему CSS (чего следует избегать).

Я пробовал все это и все еще пытаюсь применить свой 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;
}

1 Ответ

0 голосов
/ 01 октября 2019

У вас есть правильные стили. Причина, по которой вы не видите применения ваших стилей, заключается в том, что вы неправильно ориентируете селекторы в CSS. Например, 

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

следует изменить на 

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

Вам не нужно указывать тег «a» после ссылки .nav. когда вы добавляете пробел между селекторами в CSS, например, «.navbar-light .navbar-nav», это означает, что вы выбираете все дочерние узлы, которые содержат класс «navbar-nav», принадлежащий родительскому элементу «.navbar-light ".

В вашем случае у вас было" .navbar-light .navbar-nav .nav-item .nav-link a ", поэтому браузер ищет все <a> теги / селекторы, которые находятся подСелектор ".nav-link". Которого в данном случае не существует. Вместо этого у вас есть тег <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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...