0

私は基本的な Web サイトのコーディングと試行にまったく慣れておらず、BootStrap CSS を基礎として使用しています。

私はナビピルを設定し、これまでにそれらをカスタマイズすることができました（間隔、フォント、背景色など）が、ナビピルの背後にあるヘッダーの背景色を変更しようとして何時間も苦労しました-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;
}

ルールの具体性を高めるために #navigator ID を選択していなかったにもかかわらず、ブートストラップ CSS の望ましいオーバーライドが生成されました。誰かがこの方法が機能する理由を説明できますか?

さらに、#navigator ヘッダー ID を追加しなかった他の Web サイト ページには新しい背景が表示されないため、このオーバーライドを行う CSS を変更する方法 (各 HTML ページに #navigator ID を追加する以外に) はありますか?すべてのページで機能しますか?

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 に答える