CSS - id内のクラスを選択する構文

id内のタグをクラス名で選択するセレクタ構文は何ですか？例えば、内側の「li」を赤にするために、以下で選択する必要があるのは何ですか？CSS - id内のクラスを選択する構文

<html> 
<head> 
    <style type="text/css"> 
     #navigation li 
     { 
      color: green; 
     } 

     #navigation li .navigationLevel2 
     { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <ul id="navigation"> 
     <li>Level 1 item 
      <ul class="navigationLevel2"> 
       <li>Level 2 item</li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

出典

2009-07-16 Jeremy

#navigation .navigationLevel2 li 
{ 
    color: #f00; 
}

出典

2009-07-16 22:25:12

に不要なセレクタがあります。 – Galen

私は不必要なことを意味しました！ – Galen

表示されている例がすべてマークアップの場合のみです。ご存じのように、必要なマークアップはもっと複雑です。私は与えられた情報から私の答えに基づいていました。 –

.navigationLevel2 li { color: #aa0000 }

出典

2009-07-16 22:24:39 Galen

これは、不要なli：sに適用せずにこのトリックを行う場合、セレクタの数が少なく、より高速なので、これはやり方です。少なくともGoogleのページパフォーマンスのアドバイスによると、 – PatrikAkerstrand

ここでは、2つのオプションがあります。それは最終的に以下の作業を必要とするので、私はnavigationAltオプションを好む：

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    #navigation li { 
 
     color: green; 
 
    } 
 
    #navigation li .navigationLevel2 { 
 
     color: red; 
 
    } 
 
    #navigationAlt { 
 
     color: green; 
 
    } 
 
    #navigationAlt ul { 
 
     color: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul id="navigation"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li class="navigationLevel2">Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul id="navigationAlt"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li>Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

出典

2009-07-16 22:30:43 Jason

これも動作しますし、あなたが余分なクラスは必要ありません：あなたの場合

#navigation li li {}

をLIの3番目のレベルがあります。上記のセレクタから継承するスタイルの一部をリセット/オーバーライドする必要があるかもしれません。

#navigation li li li {}

出典

2009-07-16 22:39:50

CSS - id内のクラスを選択する構文

答えて

関連する問題