Hay alguna forma de hacer números en la lista ordenada negrita?

Es allí cualquier selector CSS para adjuntar un poco de estilo a la parte numérica de una lista ordenada sólo?

He HTML como:

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

Que debe de salida:

1.a
2.b
3.c

Necesito hacer 1., 2. y 3. negrita, dejando a,b,c regular.

Soy consciente de la  solución…

posibles duplicados de Hacer ABC Ordenó a los Elementos de la Lista Tienen el Estilo Negrita
sólo tiene que utilizar un counter-reset y list-style-type: none codepen.io/gc-nomade/pen/fdbEm

InformationsquelleAutor notnull | 2014-01-26

10 Comentarios

88

Counter-increment

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
- Si su LIs contienen Ps u otros elementos de nivel de bloque, también es necesario deshacer el texto-guión, como… ` ol > li * { text-indent: 0; } ` edit: lo siento, se ve como el formato del código es roto en comentarios.
- Gracias por agregar el texto-guión demasiado! Esta solución fue perfecto!
- Al añadir este código css personalizado aquí: hlbenefits.com/best-vegan-vegetarian-protein-sources-2016 puedo obtener un resultado extraño cuando la numeración se convierte 1.1. | 2.1. | 3.1. | y así sucesivamente. El segundo (1) se pone en negrita. Así que, básicamente, se añade otra numeración sin contar. ¿Alguien puede decirme por qué está sucediendo esto?
- Conjunto de list-style-type a none para deshacerse de la primera (nativo) número. También, el enfoque propuesto en esta respuesta es inteligente, pero dificulta a alinear a la izquierda el texto correctamente si el li saltos de línea.
- Esto no respeto de las listas con un determinado li type=»a», type=»i», etc. Si usted tiene una lista con el orden alfabético y un elemento tiene una lista anidada con la orden romana, todos ellos se convierten en números decimales.
- la respuesta fue más fácil para mí para aplicar con profunda listas y diferentes tipos de lista a través de (A,1,a)
InformationsquelleAutor dcodesmith

Un año más tarde, pero como esto también podría ser interesante para los demás a venir a aquí en el futuro:

Otro fácil posibilidad sería envolver el elemento de la lista de contenido en un , el estilo de la <li> como negrita y el  como regular. Este también sería preferible desde un IA punto de vista, especialmente cuando <li>s pueden contener sub-listas (para evitar la mezcla de los nodos de texto con elementos de nivel de bloque).

Ejemplo completo para su comodidad:

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > p {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
        </ol>
    </body>
</html>

Si usted prefiere un enfoque más genérico (que abarcaría también a otros escenarios como <li>s con descendientes de otros que , puede que desee utilizar li > * en lugar de li > p:

<html>
    <head>
        <title>Ordered list items with bold numbers</title>
        <style>
            ol li {
                font-weight:bold;
            }
            li > * {
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <p>List Item 1</p>
            </li>
            <li>
                <p>Liste Item 2</p>
                <ol>
                    <li>
                        <p>Sub List Item 1</p>
                     </li>
                    <li>
                        <p>Sub List Item 2</p>
                     </li>
                </ol>
            </li>
            <li>
                <p>List Item 3.</p>
            </li>
            <li>
                <code>List Item 4.</code>
            </li>
        </ol>
    </body>
</html>

(Marque el elemento de la lista 4 aquí, que es ol/li/código y no ol/li/p/código aquí.
Sólo asegúrese de usar el selector li > * y no li *, si usted sólo desea que el estilo de nivel de bloque descendientes como regular, pero no también elementos incorporados como «foo palabra negrita foo.»

Este es un encendedor y un mejor enfoque de los dos enfoques mencionados anteriormente. Si desea que esta en un maestro de archivo CSS pero no quiero que esto sea de aplicación, a escala de las clases de uso en su lugar (es decir, ol -> nombre de clase-1, li -> nombre de clase-2).
Genial! Esto debe ser aceptado respuesta. Y con el siguiente código adicional puede normalizar las listas anidadas sin la necesidad de s en ellos: .listClassName li {font-weight: bold;} .listClassName li > *, .listClassName li > * > * {font-weight: normal;}
Bueno! Es simple y funciona!
Esta es la solución correcta en mi opinión

InformationsquelleAutor Stefan Gentz

JSFiddle:

ol {
    counter-reset: item;
}
ol li { display: block }

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

Esto funciona mejor para mí. Gracias por compartir.

InformationsquelleAutor KingKongFrog

14

yo tenía un problema similar al escribir un boletín de noticias. así que tuve que poner en línea el estilo de esta manera:
```
<ol>
<li style="font-weight:bold">something</li>
<li style="font-weight:bold">something</li>
<li style="font-weight:bold">something</li>
</ol>
```
- La única solución que funciona también en los correos electrónicos (en todas las plantillas de correo electrónico, ya que no podemos proporcionar css allí)
InformationsquelleAutor Giulio
3

Esta es una actualización para dcodesmith la respuesta de https://stackoverflow.com/a/21369918/1668200

La propuesta de solución también funciona cuando el texto es más largo (es decir, las líneas necesidad de ajustar): Actualizado El Violín

Cuando usted está utilizando un sistema de coordenadas, usted puede ser que necesite para hacer uno de los siguientes (al menos esto es cierto para la Fundación de 6 – no podía reproducir en el Violín):
- Agregar box-sizing:content-box; de la lista o de su recipiente
- O cambiar text-indent:-2em; a -1.5em
P. S.: yo quería agregar esto como una edición a la respuesta original, pero fue rechazada.

InformationsquelleAutor Thomas Landauer

Si usted está usando Bootstrap 4:

<ol class="font-weight-bold">
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
    <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>

Suena muy sencillo. Voy a intentar instalar Bootstrap 4 para probarlo.

InformationsquelleAutor Ken Avila

La respuesta anterior tiene un efecto secundario que convierte a todos los tipos de listas numéricas.
<ol type="a"> mostrará 1. 2. 3. 4. en lugar de una. b. c. d.

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) ".";
}

El código anterior se añade soporte para letras minúsculas, números romanos en minúsculas. En el momento de la redacción de los navegadores no diferencian entre mayúsculas y minúsculas selectores de tipo por lo que sólo puede elegir mayúsculas o minúsculas para su alternativa ol tipos supongo.

InformationsquelleAutor Digits

2

Un nuevo ::marker pseudo-elemento selector ha sido añadido a CSS Pseudo-Elementos de Nivel 4, lo que hace que el estilo de la lista de números de elemento en negrita tan simple como
```
ol > li::marker {
  font-weight: bold;
}
```
Lamentablemente, actualmente sólo se compatible con Firefox 68 y hasta. (Ver Chrome Error 457718 para Chrome/Blink estado.)

InformationsquelleAutor Kevinoid
0

Usted también podría poner alrededor de a,b,c y, a continuación, en negrita de la ul en el css.

EJEMPLO
```
ul {
font-weight:bold;
}

<ul><li>a</li></ul>
```
InformationsquelleAutor Lucas Kochek

-1

Muy tarde la respuesta, pero espero que alguien encuentre este útil

Tuve una situación como esta:

Elemento de la lista

una. Elemento de la lista

Donde el primer elemento se , el sub-elemento de peso normal y el ‘1.’ sólo no negrita.

Mi solución fue a través de jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if ($('ol').has('li').has('strong')) {
            $('ol ').css('font-weight', 'bold');
            $('ol > li > ol').css('font-weight', 'normal');
        }
     });
</script>

Esperemos que esto ayude a alguien!

¿Por qué el downvote? Esta es una solución de trabajo.

InformationsquelleAutor EGC

10 Comentarios

Dejar respuesta Cancelar respuesta