CSS - Sintassi per selezionare una classe all'interno di un id

Qual è la sintassi del selettore per selezionare un tag all'interno di un id tramite il nome della classe? Ad esempio, cosa devo selezionare qui sotto per far diventare il "li" interno rosso?CSS - Sintassi per selezionare una classe all'interno di un 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>

fonte

2009-07-16 Jeremy

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

fonte

2009-07-16 22:25:12

ha selettori non necessari! – Galen

intendevo non necessario! – Galen

Solo se l'esempio mostrato è tutto il markup. Per quanto ne sai, il markup necessario è più complicato. Ho basato la mia risposta sulle informazioni fornite. –

.navigationLevel2 li { color: #aa0000 }

fonte

2009-07-16 22:24:39 Galen

se questo fa il trucco senza applicarlo a Li indesiderati: s, allora questo è la strada da percorrere, dal momento che ha un minor numero di selettori ed è più veloce quindi. Almeno secondo il consiglio di performance della pagina di Google. – PatrikAkerstrand

Ecco due opzioni. Io preferisco l'opzione navigationAlt in quanto comporta meno lavoro alla fine:

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

fonte

2009-07-16 22:30:43 Jason

Questo sarà anche il lavoro e non avete bisogno la classe in più:

#navigation li li {}

Se avere un terzo livello di LI che potresti dover ripristinare/sovrascrivere alcuni degli stili che erediteranno dal selettore precedente. È possibile indirizzare il terzo livello in questo modo:

#navigation li li li {}

fonte

2009-07-16 22:39:50

CSS - Sintassi per selezionare una classe all'interno di un id

risposta

Problemi correlati