Style de liste CSS

Question

J'utilise YUI reset/base, après la réinitialisation, il définit les balises ul et li sur le style de liste: disque à l'extérieur;

Mon balisage ressemble à ceci:

<div id="nav"> 
    <ul class="links"> 
     <li><a href="">Testing</a></li> 
    </ul> 

</div> 

Mon CSS est:

#nav {} 
#nav ul li { 
    list-style: none; 
} 

Maintenant que fait le petit disque à côté de chaque li disparaître.

Pourquoi cela ne fonctionne pas?

#nav {} 
#nav ul.links 
{ 
     list-style: none; 
} 

Cela fonctionne si je supprime le lien vers le fichier base.css, pourquoi ?.

Mise à jour: sidenav -> nav

Answer 1

Je pense que Dan était proche de sa réponse, mais ce n'est pas un problème de spécificité. Vous pouvez définir le style de liste dans la liste (UL), mais vous pouvez également remplacer ce style de liste pour les éléments de liste individuels (les LI).

Vous dites au navigateur de ne pas utiliser des balles sur la liste, mais YUI indique au navigateur de les utiliser sur des éléments de liste (YUI gagne):

ul li{ list-style: disc outside; } /* in YUI base.css */ 

#nav ul.links { 
    list-style: none; /* doesn't override styles for LIs, just the UL */ 
} 

Ce que vous voulez est de dire au navigateur ne pas les utiliser sur les éléments de la liste:

ul li{ list-style: disc outside; } /* in YUI base.css */ 

#nav ul.links li { 
    list-style: none; 
} 

Answer 2

devrait-il pas:

#nav ul.links 

Answer 3

Peut-être que le style est le base.css remplace vos styles avec "important!"? Avez-vous essayé d'ajouter une classe à ce li et de créer son propre style?

Answer 4

Dans le premier extrait, vous appliquez le style de liste à l'élément li, dans la seconde à l'élément ul.

Essayez

#nav ul.links li 
{ 
    list-style: none; 
} 

Answer 5

Le dernier exemple ne fonctionnera probablement pas à cause de CSS specificity. (. Une explication plus sérieuse se trouve here) Autrement dit, la règle de base.css de YUI est:

ul li{ list-style: disc outside; } 

Ceci est plus « spécifique » que le vôtre, de sorte que la règle de YUI est utilisé. Comme il a été noté à plusieurs reprises, vous pouvez rendre votre règle plus spécifique en ciblant les li tags:

#nav ul li{ list-style: none; } 

Difficile à dire pour sûr sans regarder votre code, mais si vous ne connaissez pas la spécificité, il vaut certainement la peine une lecture.

Answer 6

Utilisez celui-ci:

.nav ul li { 
    list-style: none; 
} 

ou

.links li { 
    list-style: none; 
} 

il devrait fonctionner ...