0

我对编码和尝试基本网站完全陌生，并且使用 BootStrap CSS 作为基础。

到目前为止，我已经设置了 nav-pills 并设法对其进行了自定义（间距、字体、背景颜色等），但努力了几个小时试图更改 nav-pills 后面的标题的背景颜色 - 1白色 b/g 到2灰色 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;
}

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

此外，由于其他网站页面没有出现新背景，我没有添加#navigator 标头ID，是否有修改我的CSS 的方法（除了将#navigator ID 添加到每个HTML 页面）这将使这个覆盖跨所有页面工作？

4

1 回答 1

3

在您的第一个 CSS 示例中，您的目标是行内的段落标签，但在您提供的 HTML 中，您的段落标签格式不正确（缺少闭包且不包含任何内容）。因此，段落标签以 0 高度呈现，这解释了为什么您看不到背景颜色。如果您将内容添加到段落标签并添加闭包，它将与您发布的第一个 CSS 位一起使用。

换句话说，这不是一个特异性问题。

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

引导层示例

重新阅读您的问题后，我认为您根本不应该使用段落标签。看起来您正试图将其用作药丸的容器，但您应该使用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;
}

引导层

于 2015-07-23T16:27:18.050 回答