CSS: styles de bullet sur les listes

Pourquoi ce qui suit ne fonctionne-t-il pas? Je veux que le style ul soit pour la plupart unbulleted (en raison du code hérité), mais parfois pour pouvoir l'utiliser comme une liste à puces traditionnelle. J'ai donc défini une classe spéciale pour les listes à puces.CSS: styles de bullet sur les listes

ul li {padding:0 0 0.5em 0; margin-left:0; list-style-type:none;} 
ul.bulleted {padding:0 0 0 0; list-style-type: disc; color:red;}

Le code HTML:

<p>Intro text:</p> 
     <ul class="bulleted"> 
      <li>blah</li> 
      <li>blah</li> 
      <li>blah</li> 
     </ul>

Cela montre la liste avec le texte rouge, comme prévu, mais sans balles!

déconcertés :(

Source

2010-02-06 AP257

ul li est plus spécifique que ul.bulleted donc il faut donc la priorité.

Essayez plutôt d'utiliser ul.bulleted li pour le deuxième ensemble de règles.

Cela rendra même plus plus spécifique que la première règle, et lui permettre d'être appliqué.

Source

2010-02-06 18:39:32 Dolph

ce n'est pas "essayer". fais-le et ça marchera :) –

Merci! Maintenant, je comprends :) Il est si difficile de déboguer CSS. Grande explication concise et claire, merci – AP257

Le problème est que votre premier style applique aux li articles et enlève leur balle, tandis que le second s'applique à l'élément `ul ...

faire votre première règle (en supprimant la li)

ul {padding:0 0 0.5em 0; margin-left:0; list-style-type:none;}

ou votre deuxième

ul.bulleted li {padding:0 0 0 0; list-style-type: disc; color:red;}

selon la façon dont d'autres règles ..

Source

2010-02-06 18:39:20

CSS: styles de bullet sur les listes

Répondre

Questions connexes