CSS, affecte uniquement la lis supérieure d'un ul?

Question

J'ai une liste de navigation UL imbriquée, avec les ul's contenus dans d'autres éléments li. voici la marque vers le haut:

<ul class="navigation"> 
    <li><a href="#">No Chidren</a></li> 
    <li><a href="#">With Chilren</a> 
     <ul> 
     <li><a href="#">Child 1</a></li> 
     <li><a href="#">Child 2</a></li> 
     </ul> 
    </li> 
</ul> 

Je l'ai essayé le style avec quelques-unes des déclarations CSS suivantes:

.navigation { 
//stylings 
} 

.navigation li{ 
//stylings 
} 

.navigation li a{ 
//stylings 
} 

.navigation li a:hover{ 
//stylings 
} 

mais le li .navigation affecte tous les éléments de la liste, y compris les enfants. Y a-t-il un moyen de cibler le lis pour que les styles ne soient appliqués qu'aux plus hauts, et non aux enfants?

Answer 1

Comme d'autres l'ont mentionné, le sélecteur > sélectionne uniquement les enfants directs. Cependant, cela doesn't work in IE 6.

Si vous avez besoin pour soutenir IE 6, vous pouvez ajouter une classe à l'enfant ul s ou li s, et l'utiliser pour enlever la cascade de style du haut li:

<ul class="navigation"> 
    <li><a href="#">No Chidren</a></li> 
    <li><a href="#">With Chilren</a> 
     <ul class="level1"> 
     <li><a href="#">Child 1</a></li> 
     <li><a href="#">Child 2</a></li> 
     </ul> 
    </li> 
</ul> 

-

.navigation li{ 
    background: url(bg.png); 
} 

.navigation .level1 li{ 
    background: none; 
} 

Answer 2

Comme cela, le ">" indique que le li doit être un enfant direct de .navigation

.navigation { 
//stylings 
} 

.navigation > li{ 
//stylings 
} 

.navigation > li a{ 
//stylings 
} 

.navigation > li a:hover{ 
//stylings 
} 

Answer 3

Oui, il est possible avec sélecteurs enfants.

.navigation>li>a{ 
//stylings 
} 

Le code ci-dessus affectera le lien "Sans enfants" et "Avec enfants" mais pas l'élément "enfant 1".

travaille par exemple ici: http://jsfiddle.net/VuNwX/

Et vous pouvez en savoir plus sur les sélecteurs: http://css.maxdesign.com.au/selectutorial/index.htm