Y a-t-il un moyen de rendre les nombres en liste ordonnée en gras?

Existe-t-il un sélecteur CSS pour associer un style à la partie numérique d’une liste ordonnée uniquement?

J’ai du HTML comme:

  1. a
  2. b
  3. c

Qui devrait sortir:

 1.a 2.b 3.c 

Je dois faire 1., 2. et 3. gras , tout en laissant un, b, c régulier.

Je suis au courant de la solution de contournement …

Contre-incrémentation

CSS

 ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } 

DEMO

JSFiddle:

 ol { counter-reset: item; } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; font-weight: bold; } 

Environ un an plus tard, mais comme cela pourrait aussi être intéressant pour les futurs venus:

Une autre possibilité serait d’emballer le contenu de l’élément de liste dans un

style de

  • en gras et le

    régulier. Cela serait également préférable d’un sharepoint vue IA, en particulier lorsque

  • s peut contenir des sous-listes (pour éviter de mélanger des nœuds de texte avec des éléments de niveau bloc).

    Exemple complet pour votre commodité:

       Ordered list items with bold numbers    
    1. List Item 1

    2. Liste Item 2

      1. Sub List Item 1

      2. Sub List Item 2

    3. List Item 3.

    Si vous préférez une approche plus générique (qui couvrirait également d’autres scénarios comme

  • avec des descendants autres que

    , vous pouvez utiliser li > * au lieu de li > p :

       Ordered list items with bold numbers    
    1. List Item 1

    2. Liste Item 2

      1. Sub List Item 1

      2. Sub List Item 2

    3. List Item 3.

    4. List Item 4.

    (Vérifiez l’élément de liste 4 ici qui est ol / li / code et non ol / li / p / code ici. Veillez simplement à utiliser le sélecteur li > * et non li * , si vous voulez seulement régulière, mais pas aussi en ligne comme “foo mot gras foo.”

    J’ai eu un problème similaire en écrivant un bulletin. j’ai donc dû intégrer le style de cette façon:

     
    1. something
    2. something
    3. something

    Ceci est une mise à jour pour la réponse de dcodesmith https://stackoverflow.com/a/21369918/1668200

    La solution proposée fonctionne également lorsque le texte est plus long (c’est-à-dire que les lignes doivent être emballées):

    Lorsque vous utilisez un système de grid, vous devrez peut-être effectuer l’une des opérations suivantes (au moins, cela est vrai pour Foundation 6 – impossible de le reproduire dans le violon):

    • Ajouter box-sizing:content-box; à la liste ou à son conteneur
    • OU change le text-indent:-2em; à -1.5em

    PS: je voulais append ceci comme une modification à la réponse originale, mais elle a été rejetée.

    Si vous utilisez Bootstrap 4:

     
    1. Curabitur aliquet quam id dui posuere blandit.
    2. Curabitur aliquet quam id dui posuere blandit.

    La réponse précédente a un effet secondaire qui transforme tous les types de listes numériques.

      affichera 1. 2. 3. 4. plutôt qu’abcd

       ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } /* Add support for non-numeric lists */ ol[type="a"] > li:before { content: counter(item, lower-alpha) "."; } ol[type="i"] > li:before { content: counter(item, lower-roman) "."; } 

      Le code ci-dessus ajoute un support pour les lettres minuscules, les chiffres romains minuscules. Au moment où vous écrivez, les navigateurs ne font pas la distinction entre les sélecteurs en minuscules et en majuscules pour le type, donc je suppose que vous ne pouvez choisir que des majuscules ou minuscules pour vos autres types.