CSS3 sélecteurs - sélectionner après

Question

premier élément ou élément Disons un ont le code suivant:

<nav id="main-navigation"> 
    <ul> 
     <li><a href="#">Link 1 Level 1</a></li> 
     <li><a href="#">Link 1 Level 1</a></li> 
     <ul> 
      <li><a href="#">Link 1 Level 2</a> 
     </ul> 
    </ul> 
</nav> 

Et maintenant, je veux de mettre en première hauteur de ul à 100px et deuxième ul devraient être 300px.

Lorsque je tente

nav ul { 
    height: 100px 
} 

Deuxième ul hérite également cette valeur. J'essayais "~", "+", ">", first-childs etc. mais je ne sais pas comment le faire, même avec de la documentation.

Existe-t-il un guide bien expliqué (de préférence avec démos/écrans) pour les nouveaux sélecteurs css3? W3 Table est trop ringard pour moi.

Merci !!!

Answer 1

Sélectionnez simplement ul qui est un descendant de ul et donnez-lui ce style, si vous n'avez que 2 couches de <ul> s. Pas besoin de combinateurs spéciaux CSS2/CSS3 puisque <ul> ne peut pas contenir directement <ul>, plus vous n'avez pas à vous soucier de IE non plus.

nav ul { 
    height: 100px; 
} 

nav ul ul { 
    height: 300px; 
} 

Answer 2

Pour sélectionner les enfants directs d'un élément, et non un descendant, vous devez utiliser la syntaxe >. Dans votre cas (après avoir mis la deuxième ul dans un li) dont vous avez besoin:

nav > ul { 
    height: 100px; 
} 

nav > ul > li > ul { 
    height: 300px; 
} 

supplémentaire: Il ne fait pas vraiment de sens d'avoir un élément 300px à l'intérieur d'un élément 100px. Pourquoi veux-tu ça? Un autre extra: Essayez de lire les documents W3C, il vous fera gagner du temps à long terme. Ce que vous ne comprenez pas, vous pouvez toujours demander sur SO.

Answer 3

Tout d'abord, à quel point la compatibilité du navigateur est-elle importante pour vous? Tous les sélecteurs que vous avez mentionnés ont des problèmes dans différentes versions de IE (IE8 est évidemment meilleur que IE7, mais IE8 manque souvent de sélecteurs CSS)

Les sélecteurs imbriqués simples (juste un espace entre les noms CSS) travaillez pour vous - bien que, comme vous le dites, le réglage nav li {height:100px;} le définit pour tous les LI, vous pouvez le remplacer par nav li li {height:300px;} pour redéfinir l'intérieur comme vous le souhaitez.

Si vous souhaitez utiliser les sélecteurs «corrects», celui que vous souhaitez est >.

nav>ul>li { 
    height:100px; 
} 

Cela n'affecte que les éléments LI externes, pas les éléments internes. Cependant, comme je le dis, il ne fonctionnera pas dans les anciennes versions de IE (heureusement, il fonctionne dans IE7 et plus, donc c'est seulement un problème si vous voulez soutenir IE6).

Vous dites que vous avez trouvé les différents sélecteurs assez difficiles à saisir. Je vous recommande de visiter Quirksmode.Pour commencer, il dispose d'un tableau de compatibilité très pratique montrant quels navigateurs supportent les sélecteurs, mais il a également d'excellents exemples du fonctionnement de chaque sélecteur, ce qui devrait vous aider à mieux les comprendre.