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 <span> solución…

InformationsquelleAutor notnull | 2014-01-26

10 Comentarios

  1. 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)

  2. 23

    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 <p>, el estilo de la <li> como negrita y el <p> 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 <p>, 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 <strong>palabra negrita</strong> 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 <p>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
  3. 19

    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.
  4. 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"><span style="font-weight:normal">something</span></li>
    <li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
    <li style="font-weight:bold"><span style="font-weight:normal">something</span></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í)
  5. 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.

  6. 3

    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.
  7. 2

    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.

  8. 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><span style="font-weight:normal">a</span></li></ul>
  9. -1

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

    Tuve una situación como esta:

    1. Elemento de la lista

      una. Elemento de la lista

    Donde el primer elemento se <strong>, 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.

Dejar respuesta

Please enter your comment!
Please enter your name here