avec des chiffres d’une autre couleur

  1. test
  2. test

montrera comme:

  1. tester
  2. tester

Je veux avoir des chiffres colorés et du texte noir!

Je peux éditer le CSS, mais je n’ai pas access au HTML.

    La spécification CSS donne un exemple de ce que vous faites. Malheureusement, pendant qu’il fonctionne sur Firefox 3, il ne semble pas fonctionner sur IE7:

          
    1. item
    2. item
    3. item

    Je ne sais pas si cela fonctionne mais je pense que cela devrait:

     
  • test
  • modifier
    Si vous ne pouvez pas éditer le HTML, je crains que ce ne soit pas possible. Si vous pouviez append du javascript au code HTML (une fois dans la tête), vous pourriez le faire comme ceci:

     $(document).ready( function() { $('ol li').wrapInner(' ').addClass('red'); }); 

    Vous aurez besoin de la bibliothèque jQuery pour cela.
    Ensuite, dans votre CSS, définissez simplement une classe rouge et une classe noire avec des couleurs: les déclarations rouge / noir.

    Voici une solution qui encapsule également le texte pour chaque élément de liste aligné à gauche sous la première ligne (et non au-dessous du numéro de liste):

    HTML

     
    1. Long text that might wrap onto a second line.
    2. Long text that might wrap onto a second line.
    3. Long text that might wrap onto a second line.

    CSS

     .GreenNumbers { list-style-type: none; } .GreenNumbers ol { margin-left: 2em; } .GreenNumbers li { counter-increment: count-me; } .GreenNumbers li::before { content: counter(count-me) ". "; display: block; position: relative; max-width: 0px; max-height: 0px; left: -1.3em; top: .05em; color: #008000; font-weight: bold; } 

    Cela devrait faire ce que vous cherchez:

    http://archivist.incutio.com/viewlist/css-discuss/67894

    HTML

     
    1. 1 some text here
    2. 2 some more text that can span longer than one line

    CSS

     ol { list-style: none; padding-left: 2em; text-indent: -1em;} li:first-letter { float: left; font-size: ??; color: white; background: orange; line-height: 1.0; } 

    Sauf que vous voulez changer la couleur et l’arrière-plan en fonction de votre conception.

    Ce prochain est exagéré, mais vous donne beaucoup d’informations sur la façon de classer les listes:

    http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

    -Adam

    Le code de @kdgregory a fonctionné pour moi, mais cela a affecté mes listes à puces. J’ai changé li to ol li pour éviter que les balles ne soient affectées. Ainsi:

     ol { counter-reset: item } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; color: red; } 

    PS Je préfère aussi utiliser des majuscules en CSS pour des éléments comme BODY donc je peux facilement le distinguer des classes .body et ids #body .

    De la réponse à une question similaire que j’ai trouvée ailleurs:

    Juste comme une note de côté, CSS3 permettra le style facile des marqueurs de liste avec le pseudo-élément :: marker.

    Mais pour l’instant, il semblerait que vous deviez append le à votre code HTML.

    Pour approfondir un peu ce que les autres ont dit, ainsi que des précisions supplémentaires sur les questions, il n’existe aucun moyen intégré de le faire à partir de CSS sans toucher au HTML. Si vous cherchez à garder le HTML aussi propre et sémantique que possible, je ferais le styling en utilisant javascript, probablement avec une bibliothèque comme jQuery, pour ajuster le DOM afin que le css soit plus efficace.

    Je vous conseille toutefois d’utiliser la couleur pour transmettre l’information. Je ne suis pas sûr du but des chiffres en couleur, mais l’utilisation de la couleur pour afficher des informations laisse les utilisateurs daltoniens hors de la boucle et est un grand non pour l’accessibilité.

    dommage que vous ne pouvez pas éditer le HTML … que diriez-vous de js?

       

    sinon, peut-être une solution assez bonne serait

     ol {background-color: #DDD;} li {background-color: white;} 

    Il est un peu tard pour cela mais je veux le partager avec la communauté, cela m’a pris beaucoup de temps pour le faire. J’ai trouvé une solution pour modifier le fond et la couleur des numéros OL qui fonctionnent sur tous les navigateurs. Nécessite une balise supplémentaire à l’intérieur du li .

    Voir ici

    html :

      
    1. 1 A long bullet here it is long to show how it behaves on a second line
    2. 2 A long bullet here it is long to show how it behaves on a second line
    3. 3 A long bullet here it is long to show how it behaves on a second line
    4. 4 A long bullet here it is long to show how it behaves on a second line
    5. 5 A long bullet here it is long to show how it behaves on a second line

    css :

    
     ol {list-style: none;  padding-left: 10px;  retrait de texte: 0px;  margin-left: 5px;}
    
     ol li {color: # 666;}
    
     ol li: first-letter {color: # 69A8DE;  padding-right: 5px;  margin-left: -15px;}
    
    

    C’est facile, tant que vous ne souhaitez pas atsortingbuer des couleurs différentes à différents numéros d’élément de liste. Aucune modification HTML nécessaire. Peut ne pas fonctionner dans 100% des navigateurs cependant ..

     ol {color:red;} ol li {color:black;}