Pregunta Asignar css a un elemento específico


Yo tengo un <li> elemento en la página que quiero ver de cierta manera. Cambiar el css afecta a todos los <li> elementos.

Aquí está el elemento que quiero cambiar.
<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>

aquí está mi CSS para el <ul><li>

ul li {
    /*font: normal 17px Helvetica;*/
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;}

La porción de fuente comentada y el color es lo que quiero afectar a este <li> y no otros.

¿Cómo haría esto? ¡Gracias!


5
2017-11-06 19:24


origen


Respuestas:


Si puede establecer un id o una clase en el LI, entonces sería trivial ...

ul li {
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;
}

ul li.special {
    font: normal 17px Helvetica;
}

<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>

Aparte de eso, no hay una manera simple de hacer este navegador cruzado con css solo.


13
2017-11-06 19:27



Básicamente, solo necesitas darle una identidad / atributo adicional para que puedas tener un selector CSS para darle un estilo li etiqueta. Ejemplo:

/*using class*/
ul li.different {font: normal 17px Helvetica;}

/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}

/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}

3
2017-11-06 19:46



O use un estilo en línea, STYLE = en LI:

<li style = "font: Helvetica; color: # a9a9a9;"> ... </ li>


1
2017-11-06 19:33



En una nota lateral, probablemente deberías pensar en agregar fuentes sans-serif de respaldo adicionales a esa regla, aparte de Helvetica. Soy un gran admirador de ese tipo de letra, pero la mayoría de la gente no lo tiene en sus computadoras.

EDITAR: Alguien publicó mi misma respuesta mientras escribía esta. Sin embargo, guardaré la nota al margen porque es útil.


1
2017-11-06 19:36



Como se dijo anteriormente, una clase o una identificación lo harán, dependiendo de si va a usar este estilo en particular para este elemento de la lista, o planea usarlo en otro lugar (aunque solo puede usar una identificación una vez en una página, puedes reutilizar una identificación en otra página).

Puede mezclar y combinar clases e identificaciones dentro de una lista, de modo que incluso si desea diferentes estilos para cada elemento de la lista en su lista, puede hacerlo utilizando diferentes clases e identificaciones.

Por ejemplo, puede tener su estilo que da estilo a su lista de manera predeterminada, de modo que los elementos sin clase o id hereden el estilo predeterminado, y luego cualquier número de clases e id que puedan controlar los elementos individuales ...

<code><pre>
    <ul>
      <li>blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li id "extraspecial">blah blah blah</li>
      <li>blah blah blah</li>
    </ul>
</pre></code>

0
2017-11-06 19:47