SSIには仮想CSSの問題が含まれています

Question

私はpersonal siteを自宅でjavascriptを使ってApacheで実行するように設定していますが、今はServer Side Includesで始まっています。私は私のサイトのルートに別のHTMLファイルとして保存されたスタイル付きナビゲーションバーを持っています。このファイル内にはいくつかのスタイル（CSS）があり、このナビゲーションバーを（スタイルが含まれていれば）含むと、スタイルはnavbar.htmlファイル内にない他のすべてに帰属します。コードlink here。以下の部分コード。

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
width: 100%; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li.dropdown { 
display: inline-block; 
} 

これは、多くのマイページに含まれているnavbar.htmlファイル内のCSSの短いセクションです。これは、同じnavbar.htmlファイルの上のリンクであるnavbar自体のためのスタイルであり、それ自身だけです。私はそれらのページに他の（例えば、）順序付けられていないリストがある場合、それらが含まれているが、navbarのために意図されたスタイルにも影響を受けることがわかります。私がこれを持っていたもう一つの問題は、実際にそれらのページにあったCSSがnavbarに影響を与えていたことです（例えば、here navbarのリンクが色を変えました）。

私の全体的な質問は、実際のページに表示されている他のスタイルとは別にSSIを組み込むためにはどうすればよいのでしょうか？ありがとう！

Answer 1

ページ上のCSS（インクルードを経由している場合でも）は、そのページのすべてに影響します。より具体的なCSSセレクタを使用する - navbarにクラスまたはIDを与え、そのクラス/ IDだけを対象にします。

<div id="navbar"> 
    <ul>...</ul> 
</div> 

#navbar ul { ... } 

#navbar li { ... } 

など