Comment le regroupement doit-il être combiné correctement avec les sélecteurs enfants et descendants?

Question

Les sélecteurs enfant et descendant ont fui vers chaque élément de ma structure html et j'ai découvert que cela se produisait lorsque je combinais le regroupement avec lui.

Cela affecte tous les éléments du document entier:

ul#topnav > li a, a:hover, a:focus{ 
font-size: 14px; 
color: #C2C5CC; 
text-decoration: none; 
padding:0px; 
} 

alors que cela affecte seulement ce qu'il est supposé affecter laisser tous les éléments en dehors des critères de sélection spécifiés seuls:

ul#topnav > li > a{ 
font-size: 14px; 
color: #C2C5CC; 
text-decoration: none; 
padding:0px; 
} 

ul#topnav > li > a:hover{ 
font-size: 14px; 
color: #C2C5CC; 
text-decoration: none; 
padding:0px; 
} 

ul#topnav > li > a:focus{ 
font-size: 14px; 
color: #C2C5CC; 
text-decoration: none; 
padding:0px; 
} 

Comment devrait regroupement être combiné correctement?

Answer 1

Vous étiez très proche. Le regroupement CSS nécessite la répétition du sélecteur complet (ul#topnav > li):

ul#topnav > li > a, 
ul#topnav > li > a:hover, 
ul#topnav > li > a:focus{ 
font-size: 14px; 
color: #C2C5CC; 
text-decoration: none; 
padding:0px; 
}