3種類のブートストラップメニューカラーを1つのCSSファイルに保存する方法は？

ブートストラップのナビゲーションメニューの色が残りのページとは異なる2つのページ（合計3つの異なる設定）があります。
ナビゲーションメニューは1つのhtmlファイル（各ページにリンクされています）です。
1つのCSSファイルにすべてのコードを入れたいと思います。どうすればいいですか？
ありがとうございます。3種類のブートストラップメニューカラーを1つのCSSファイルに保存する方法は？

.navbar-default { 
    background-color: #65625B; 
    background-color: transparent; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)"; 
    zoom: 1; 
    background-color: rgba(255, 255, 255, 0.0) !important; 
    border-color: transparent; 
    border-color: #65625B; 
    border-color: rgba(255, 255, 255, 0.0) !important; 
    font-size: 12px; 
} 

@media(max-width:767px){ 
.navbar-default { 
    background-color: #65625B !important; 
    border-color: #65625B !important; 
} 
} 

/* 3-bar button color */ 
.navbar-toggle { 
    background-color: #65625B !important; 
} 

/* 3-bar button hover */ 
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #83817b !important; 
} 

/* 3-bar button border */ 
.navbar-default .navbar-toggle { 
    border-color: #65625B !important; 
}

出典

2017-06-12 ChristinaD

異なるクラス？ – Hash

ページロード時にjQueryを使用して、異なるページのナビゲーションバーに異なるクラスを追加することができます。 – ashanrupasinghe

あなたの時間と答えのためにハッシュとashanrupasingheありがとうございました。私は以下のGerardによって提案されたIDを使用しました。 – ChristinaD

各ページにはそれぞれ独自のボディがあると仮定して、異なる色を必要とするページに一意のIDを割り当てます。

<body id="my-blue-navigation">

次に、CSSで正しいクラスを参照してください。

#my-blue-navigation .navbar-default { 
    background-color: blue; 
}

nav { 
 
width: 100%; 
 
height: 100px; 
 
} 
 

 
.navbar-default { 
 
background-color: red; 
 
} 
 

 
#my-blue-navigation .navbar-default { 
 
background-color: blue; 
 
}

<body id="my-blue-navigation"> 
 
<nav class="navbar-default"> 
 
</nav> 
 
</body>

出典

2017-06-12 06:43:45 Gerard

Gerardありがとうございました:)私は前にそれを試しましたが、何らかの理由で動作しませんでした - あなたは魔法を持ってきました。< – ChristinaD

あなたは歓迎です。 – Gerard

3種類のブートストラップメニューカラーを1つのCSSファイルに保存する方法は？

答えて

関連する問題