Переопределение BootStrap CSS - сложность понимания специфики

Question

Я абсолютно новичок в написании кода и в работе с базовым сайтом, и использовал в качестве основы BootStrap CSS.

Я настроил таблетки nav и до сих пор сумел их настроить (интервалы, шрифт, цвета фона и т. Д.), Но пытался часами пытаться изменить цвет фона моего заголовка позади таблеток nav - 1 белый б / г до 2 серый б / г.

Мой контейнер заголовка HTML читает:

<div class="header">
<div class="row">
<p id="navigator">

[nav-pills code]

</>
</div>
</div>

После долгих исследований специфичности я подумал, что это может быть моей проблемой, поэтому я попробовал код CSS:

.header .row #navigator {
background-color: #CCCDD9;
} 

безрезультатно, но обнаружил, что просто сработало

.header .row {
background-color: #CCCDD9;
} 

теперь произвел желаемое переопределение загрузочного CSS, хотя я даже не выбирал идентификатор #navigator для увеличения специфики правила. Может кто-нибудь объяснить, почему этот метод работает?

Кроме того, поскольку новый фон не отображается для других страниц веб-сайта, к которым я не добавил идентификатор заголовка #navigator, существует ли способ (помимо добавления идентификатора #navigator на каждую HTML-страницу) изменения моего CSS, который сделал бы это переопределение работать на всех страницах?

Answer 1

В первом примере CSS вы нацеливаетесь на тег абзаца в строке, но в HTML-коде, который вы указали, ваш тег абзаца искажен (отсутствует замыкание и нет содержимого). Из-за этого тег абзаца отображается с высотой 0, что объясняет, почему вы не видите цвет фона. Если вы добавите контент в тег абзаца и добавите замыкание, оно будет работать с первым битом CSS, который вы опубликовали.

Другими словами, это не проблема специфичности.

<div class="header">
  <div class="row">
    <div class="col-sm-12">
        <p id="navigator">Testing</p>
    </div>
  </div>
</div>

Пример Bootply

Перечитав ваш вопрос, я не думаю, что вам вообще следует использовать тег абзаца. Похоже, вы пытались использовать его в качестве контейнера для таблеток, но вы должны использовать либо unordered list (как в примере документации Bootstrap или div). Вот пример кода:

HTML:

<div class="header">
  <div class="row">
    <div class="col-sm-12">
        <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>
    </div>
  </div>
</div>

CSS:

.nav-pills {
    background-color: #CCCDD9;
}

Bootply