Aplicación de CSS a la lista ordenada: ¿color de fondo debajo de los números?

Question

tengo una lista ordenada que he labrado de dos maneras:

1. coloreado los números de forma diferente al texto de la lista
2. Se aplica un color de fondo y el borde de cada elemento de la lista

See the list on the right hand side of this page

Los números se hacen de color naranja aplicando primero el estilo naranja al <li>, luego aplicando el estilo negro al texto de la lista solo con jQuery:

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

yo preferiría usar CSS solamente, pero bueno.

Así que el problema restante es cómo extender el color/borde de fondo debajo de los números también.

Gracias por atender mi pregunta!

Answer 1

respuesta Revisado:jsFiddle Pure CSS Solution

Aquí es un método revisado que no utiliza el framework jQuery original de la OP, una petición que no fue cumplido en mi respuesta anterior. Ese método utilizaba jQuery existente para aplicar un contenedor de span para el elemento li ya que la modificación directa de HTML no era posible.

Este nuevo método utiliza selectores CSS Pseudo :before y :after junto con CSS 2.1 counter función que puede tener su lista de números estilizada de manera que no se necesita ningún envoltorio jQuery. De hecho, la revisión jsFiddle muestra los números usando la fuente Google @ font-face.

Uso de la función de contador de CSS es realizado por la que se declara un nombre de variable para utilizar en el elemento ul, a continuación, incrementar el contador en el elemento :before así como el uso como contenido real.

Ejemplo simple:jsFiddle CSS Counter

HTML:

<ul> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li>  
    <li>A numbered list that's stylized!</li>  
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li> 
    <li>A numbered list that's stylized!</li>  
</ul> 

CSS:

ul{ 
    list-style-type: none; 
    white-space: nowrap; 
    margin: 0; 
    padding: 0; 
    width: 210px; 
    height: 200px; 
    overflow: auto; 
    border: 3px solid royalblue; 
    /* Setup the counter. */ 
    counter-reset: yourVariableName; 
} 
li:before{ 
    /* Advance the number. */ 
    counter-increment: yourVariableName; 
    /* Use the counter number as content. */ 
    content: 'Item ' counter(yourVariableName) ': '; 
    color: royalBlue; 
    font-family: 'Impact'; 
} 

Más sobre los contadores CSS HERE.

Mi respuesta fechada el original que utiliza marco existente en la pregunta de OP se muestra a continuación.

---

Miré a su pregunta cuidadosamente y luego miró a su página web.

Aquí está la solución que necesita: jsFiddle

En resumen, esto son las reglas CSS de reemplazo que hacen que funcione:

#secondary ol { 
    color:#F60; 
    margin-bottom:0; 
    margin-left: 0px; /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */ 
    list-style-position: inside; /* This will place the number on top and inside of the current color of li */ 
} 

.notes{ 
    color:#333; 
    width: 230px; 
    heigh: 50px; 
    display: inline-block; 
    vertical-align:text-top; 
} 

Resultado:

---

adicional: Este ejemplo variante enfatiza los números: jsFiddle

Answer 2

que es fácil de lograr con sólo el CSS:

#secondary ol { 
color: <orange>; 
} 

#secondary li { 
color: <black>; 
} 

reemplazar los marcadores de posición con el código de color correcto!

es posible que tenga que jugar con ella en función de su css pero el principio es:

• aplicar el color que desea que aparezcan los "números" como, a la <ol>
• aplica el color del texto a <li> las etiquetas

como para el resto de su pregunta, envuelven el <ol> en un div contenedor y se aplican al fondo deseado a ella.

Answer 3

En cuanto a la pregunta n. ° 1: ¿Parece que ya las ha coloreado de forma diferente? (Puedo editar esta respuesta si todavía necesita la solución)

Para el # 2:

ul#idname li { 
    background:#ddd;/*whatever colour*/ 
} 

donde idname es el ID del que <ul>

Answer 4

a su segunda pregunta, una posibilidad sería para cambiar la list-style-position al interior para su li etiquetas:

li { list-style-position: inside; } 

Esto moverá la línea número con t el resto del texto y le permite diseñarlo todo junto. Sin embargo, esto detiene la alineación del texto por separado.

Para su primera pregunta, es posible que el estilo de los números por separado en teoría utilizando el pseudo-elemento así:

li::marker { color: orange; } 

Sin embargo, creo que esto actualmente no es compatible con cualquier navegador.Puede utilizar el específico de mozilla ::-moz-list-number, pero eso obviamente no funcionará en otros navegadores.

Puede ver todos estos bits en mi ejemplo aquí: http://jsfiddle.net/XmtxL/

Answer 5

Para aquellos, que necesitan simplemente una imagen de fondo como yo hay una solución CSS sólo para esto:

ol 
    margin: 0 
    padding: 0 
    margin-left: 30px 
    position: relative 
    z-index: 2 
    > li 
     padding-left: 16px 
     margin-bottom: 20px 
     font-style: normal 
     font-weight: 700 
     position: relative 
     z-index: initial 
     &:before 
     position: absolute 
     content: url(../images/ol-li-1.png) 
     top: -8px 
     left: -34px 
     z-index: -1 

See codepen