すべてに適用されるCSSスタイルの問題

Question

私のページの1つに水平ナビゲーションバーを作成したいので、リストを使用してCSSで編集しました。しかし、同じページには他のリストもあります。また、スタイルを適用したときにnavバーで機能しましたが、他のリストは完全に破棄されました。これをどのようにして得るのですか？私はIDタグを試しましたが、すべてのリストに特定のスタイルを適用することを却下するかどうかはわかりません。別に私は 'と呼ばれているナビゲーションバーのリストから - 彼らはすべての標準的な湿原<ul>または全くIDタグと<ol>ている、つまりページの

#menubar { 

list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #85aff2; 

} 

li { 

float: left; 

} 

li a { 

display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 

} 

すべてのリストは、「標準」リストである：これは私のCSSコードですメニューバー'。あなたはあなただけ見それらがmenubar

の内側に適用する場合は、その子要素にも#menubarのようにIDを適用する必要がmenubarスタイルの場合

Answer 1

例：

#menubar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #85aff2; 
 
} 
 

 
#menubar li { 
 
    float: left; 
 
} 
 

 
#menubar li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}

<ul id="menubar"> 
 
    <li><a>one</a></li> 
 
    <li><a>two</a></li> 
 
    <li><a>three</a></li> 
 
</ul> 
 

 
<ul> 
 
    <li><a>normal one</a></li> 
 
    <li><a>normal two</a></li> 
 
    <li><a>normal three</a></li> 
 
</ul>

Answer 2

CSSの問題は、すべての 'li'要素と 'li a'要素にスタイルを適用することです。これを有効にする最良の方法は、CSSをどこに適用するのかに少しだけ特化することです。

以下を試してください（上記のコードを使用してください）。

#menubar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #85aff2; 
} 

#menubar li{ 
    float: left; 
} 

#menubar li a{ 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

Answer 3

は、これを解決するには、いくつかの方法がありますが、私はこの時点で、最も実用的な方法は、あなたのリストを持つ:not()セレクタを使用して#menubarを除外するだろうと思います。たとえば、あなたの#menubarはliためのIDである場合、あなたはこのようにそれを追加することができ

を：

li:not(#menubar) { 
    /* your css */ 
} 

li:not(#menubar) a { 
    /* your css */ 
} 

EDIT 28/02

私の理解では、あなたの横棒を持っているということです#navmenuと残りのCSSを使用しても効果がありません。 これが必要な場合は、このソリューションは機能します。それはjsfiddleでテストされました。

https://jsfiddle.net/a2kj8vds/

Answer 4

あなたはIDまたはクラスを指定しない場合、スタイルは、すべての一致する要素に影響を与えます。

例では、要素 "menubar"でスタイルを設定し、すべての "li"要素、最後にすべて "li"要素と "a"要素をスタイルします。

あなただけのナビゲーションメニュー内の項目にあなたのスタイルを適用したい場合、あなたは彼らに「nav_menu」のようなクラスを提供し、このようなスタイルを書くことができます：

.nav_menu { 
    float: left; 
} 
.li_and_a { 
    display: block; 
    color:white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

とので、あなたのリスト項目floatはクラス "nav_menu"を必要とし、リストアイテムとアイテムには "li_and_a"クラスが必要です。

これを行うと、その特定のクラスを持っていない限り、ページ上の他の "li"または "a"要素には影響しません。