CSS - Syntax zur Auswahl einer Klasse innerhalb einer ID

Wie lautet die Selektorsyntax zur Auswahl eines Tags innerhalb einer ID über den Klassennamen? Was muss ich zum Beispiel unten auswählen, damit das innere "li" rot wird?CSS - Syntax zur Auswahl einer Klasse innerhalb einer 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>

Quelle

2009-07-16 Jeremy

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

Quelle

2009-07-16 22:25:12

hat unnötige Selektoren! – Galen

ich meinte nicht gebraucht! – Galen

Nur wenn das gezeigte Beispiel das gesamte Markup ist. Soweit Sie wissen, ist das erforderliche Markup komplizierter. Ich habe meine Antwort auf die gegebene Information gestützt. –

.navigationLevel2 li { color: #aa0000 }

Quelle

2009-07-16 22:24:39 Galen

Wenn dies den Trick funktioniert, ohne es zu unerwünscht li Anwendung: s, dann ist dies der Weg zu gehen, da es wenige Wähler hat und damit schneller. Zumindest nach der Seitenleistung von Google. – PatrikAkerstrand

Hier zwei Möglichkeiten. Ich ziehe die navigationAlt Option, da sie weniger Arbeit am Ende beinhaltet:

<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>

Quelle

2009-07-16 22:30:43 Jason

Dies wird auch funktionieren und Sie nicht die Extraklasse benötigen:

#navigation li li {}

Wenn Sie Wenn Sie eine dritte Ebene von LIs haben, müssen Sie möglicherweise einige der Stile, die sie vom obigen Selektor erben, zurücksetzen/überschreiben. Sie können die dritte Ebene wie so Ziel:

#navigation li li li {}

Quelle

2009-07-16 22:39:50

CSS - Syntax zur Auswahl einer Klasse innerhalb einer ID

Antwort

Verwandte Themen