ネストされたリスト項目のCSSスタイルを変更するにはどうすればよいですか？

Question

私は#navigationコンテナ内のリスト項目のスタイルを<a>にするスタイルを持っています。これはうまくいきます。

#navigation li a { 
    text-decoration:none; 
    background:#bfe5ff; 
    color:#045e9f; 
    width:125px; 
    height:35px; 
    padding-top:11px; 
    display:block; 
    float:left; 
    margin-left:2px; 
    text-align:center; 
    font-size:18px; 
    font-weight:bold; 
} 

は現在、いくつかの <li>の中で私が <div>秒を挿入しています。これらの中で私はもう一度リストを再度使用していますが、スタイルが違うかスタイルがないはずです。

<li>を入力すると、そのスタイルは外側の<li>要素と一致しますが、そうではありません。

私はこれを使用しようとしています：

#newnavigation li a { 
    font-size:12px; 
    margin-left:20px; 
} 

をそれが働いていない - それは「外」のスタイルを適用します。私はそれがこのようなものだ推測している

<ul id="navigation"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li class="browse"> 
    <a href="#">Browse</a> 
    <div id="browsecontainer"> 
     <h3>Browse By Category</h3> 
     <li><a href="#"></a></li> 
    </div> 
    </li> 
</ul> 

Answer 1

それは外側のスタイルを適用していきます - それは、CSSでの「C」だカスケード。あなたの新しいスタイルは正しくピックアップされていますが、私はあなたがバックグラウンドカラーのような他の "継承された"スタイルを排除しようとしているのでしょうか？

外側のスタイルを適用しないようにするには、外側のパターンと一致しない要素を使用する必要があります。ここでは実用的ではありません）、または適用したくないスタイルを無効にすることができます。実際にこれらのスタイルをli要素の外側のセットに適用したい場合は、外側のli要素のCSSクラスを使用し、そのクラスに継承したくない書式を直接適用することもできます。 #navigation>だから、唯一の外側のLiがスタイリングされ

リー

：

Answer 2

：

は、これが私のマークアップですか？

<ul id="navigation"> 
    <li><a href="#">link</a></li> 
    <li><ul id="newnavigation"><li><a href="#">link</a></li></ul></li> 
</ul> 

スタイルをコピーして貼り付けても問題ありません。それはまさにそれが働いていないのですか？

更新：

私の推測は正しくはありませんでした。コードでは、#newnavigation CSSセレクタに一致するid = "newnavigation"は表示されません。

Answer 3

あなたのCSSが#ID newnavigationをターゲットされていますが、ULの#IDナビゲーション 次のことを試してみてくださいです：

<ul id="navigation"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li class="browse"> 
    <a href="#">Browse</a> 
    <div id="browsecontainer"> 
     <h3>Browse By Category</h3> 
     <ul id="newnavigation"> 
      <li><a href="#">First category</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

Answer 4

インナーアイテムを選択するには、ちょうど巣それら：

/** Matches outer *AND* inner LIs */ 
#navigation li { 
} 

/** Matches inner LIs only (li within li within #navigation) */ 
#navigation li li { 
} 

か、アンカーとの一致：

#navigation li a {} 
#navigation li li a {} 

インナースタイルでは、外側のスタイルから継承されたtylesetは、あなたのニーズに合わせていくつかの設定を上書きして、元に戻すことができます。

Answer 5

マークアップが無効であることに注意してください。あなたも新しいリストを挿入する必要があり、新しいアイテム、すなわち挿入するには：など、あなたのスタイルは、JavaScriptに問題がある場合には、validate your markupに常に良いことだ

<ul id="newnavigation> 
    <li> 
    <div> 
     <ul> 
     <li></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

を

は一致する、と述べましたインナーれるLI、必要なCSSルールは次のとおりです。

#newnavigation li ul li{ 
    // stuff here 
} 

Answer 6

また、のような子セレクタを使用することができます。

IE6以下では子セレクタはサポートされていません。