Bootply Example

Question

我是编码和尝试基本网站的新手，并且使用了BootStrap CSS作为基础。

我已经设置了导航丸，并设法自定义它们（间距，字体，背景颜色等），但在试图改变导航丸后面标题的背景颜色的几个小时里挣扎 - {{3} }白色b / g到1灰色b / g。

我的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;
}

现在生成了所需的bootstrap CSS覆盖，即使我甚至没有选择#navigator ID来增加规则的特殊性。有人可以解释为什么这种方法有效吗？

此外，由于没有为其他网站页面显示新的背景我没有添加#navigator标头ID，是否有一个修改我的CSS的方法（除了在每个HTML页面添加#navigator ID之外）使覆盖在所有页面上都有效吗？

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 Example

在重新阅读您的问题之后，我认为您根本不应该使用段落标记。看起来你试图将它用作药丸的容器，但你应该使用unordered list（如Bootstrap docs示例或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;
}

覆盖BootStrap CSS - 难以理解特异性

1 个答案:

Bootply Example

Bootply