Artículo de la lista de cambio CSS color de fondo con clase

Estoy tratando de cambiar el color de fondo de un elemento de la lista, mientras que hay otro color de fondo para otros elementos de la lista.Artículo de la lista de cambio CSS color de fondo con clase

Esto es lo que tengo:

<style type="text/css"> 

ul.nav li 
{ 
    display:inline; 
    padding:1em; 
    margin:1em; 
    background-color:blue; 
} 


.selected 
{ 
    background-color:red; 
} 

</style> 


<ul class="nav"> 
<li>Category 1</li> 
<li>Category 2</li> 
<li class="selected">Category 3</li> 
<li>Category 4</li> 
</ul>

Lo que esto produce es todos los elementos de la lista con un fondo azul (de la clase "nav"), como si no hubiera ninguna clase "seleccionado". Sin embargo, cuando saco el color de fondo de la clase "nav", obtengo el fondo rojo para el elemento de la lista con la clase "seleccionada".

Me gustaría utilizar la clase "seleccionada" para otros elementos en la página (es decir, otros elementos de la lista, divs, etc.).

¿Cómo podría solucionar esto?

Gracias de antemano.

Fuente

2011-02-13 Anonymous

Esto es un problema de selector specificity. (El selector .selected es menos específico que ul.nav li.)

Para el montaje, utilice la mayor especificidad en la regla primordial como en el original:

ul.nav li { 
background-color:blue; 
} 
ul.nav li.selected { 
background-color:red; 
}

También puede considerar nixing la ul, a menos que haya será otro .nav s. Entonces:

.nav li { 
background-color:blue; 
} 
.nav li.selected { 
background-color:red; 
}

Eso es un poco más limpio, menos tipeo y menos bits.

Fuente

2011-02-13 10:59:20

¡Gracias! De nuevo, no sabía acerca de la especificidad.¿Significa esto que no puedo tener una clase para afectar a todos los elementos secundarios si hubiera declarado un estilo para esos elementos? –

Acabo de encontrar que "! Importante" de la respuesta anterior para hacer esto. ¿Existe una desventaja al usar "! Important"? –

Hay compensaciones. ! important es una herramienta de último recurso: es fácil de usar en exceso, y aunque es simple al principio, termina complicando tu código a largo plazo. La regla general es que si no tiene que usar! Importante (y generalmente no lo hace), entonces no lo haga. Incluso entonces, querrás estar atento a la especificidad porque! Importante puede ser anulado. Por lo general, es menos claro * cuando * será (una de las razones para preferir la especificidad del selector). –

El li ul.nav es más restrictiva y así tiene prioridad, intente esto:

ul.nav li.selected { 
    background-color:red; 
}

Fuente

2011-02-13 10:56:14

Gracias! No sabía acerca de la especificidad. –

1) Usted puede utilizar la regla !important, así:

.selected 
{ 
    background-color:red !important; 
}

Ver http://www.w3.org/TR/CSS2/cascade.html#important-rules para obtener más información

2) En su ejemplo, también puede obtener el fondo rojo usando ul.nav li.selected en lugar de solo .selected. Esto hace que el selector sea más específico.

Consulte http://www.w3.org/TR/CSS2/cascade.html#specificity para obtener más información.

Fuente

2011-02-13 10:58:53 DigitalDan

¡Gracias! No sabía sobre "! Importante". –

Live Demo

Si quieres que esto se pone de relieve en función de la página de su usuario está en continuación, hacer esto:

Para automáticamente resaltar su actual navegación, primera etiqueta de su cuerpo etiquetas con un ID o clase que coincide con la sección del sitio (generalmente un directorio ) en el que se encuentra la página.

<body class="ab">

etiquetamos todos los archivos en el "sobre//" directorio con la clase "ab". Note que usamos una clase aquí para etiquetar las etiquetas de cuerpo . Descubrimos que el uso de una ID en el cuerpo no funcionaba consistentemente en algunos navegadores anteriores. Siguiente etiquetamos nuestros elementos de menú para que podamos dirigirse a ellos individualmente así:

<div id="n"> <a class="b" id="hm" 
href="/">Home</a> ... <a class="b" 
id="ab" href="/about/">About</a> ... 
</div>

en cuenta que utilizamos el "b" clase utton a elementos del menú de etiquetas como botones y un ID (" ab ") para etiquetar cada elemento de menú único (en este caso, aproximadamente). Ahora todo lo que necesitamos es un selector CSS que coincide con la etiqueta cuerpo con el menú etiqueta adecuada como esto:

body.ab #n #ab, body.ab #n #ab 
a{color:#333;background:#dcdcdc;text-decoration:none;}

Este código pone de manifiesto de manera efectiva la "Acerca de" elemento de menú y lo hace aparece gris oscuro. Al etiquetar el resto de el sitio y elementos de menú, que va a terminar con un selector de agrupados que se ve algo como esto:

body.hm #n #hm, body.hm #n #hm a, 
body.sm #n #sm, body.sm #n #sm a, 
body.is #n #is, body.is #n #is a, 
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct 
a{color:#333;background:#dcdcdc;text-decoration:none;}

Por ejemplo, cuando el usuario navega a la sección del mapa del sitio la etiqueta del cuerpo clasificada como .sm coincide con la opción del menú #sm y activa el resaltado CSS del "Mapa del sitio" en la barra de navegación.

Source

Fuente

2011-02-13 14:21:20

¡Gracias! Sin embargo, creo que lo que has proporcionado está un poco fuera de mi comprensión. Trataré de estudiarlo. –

Escenario: que tienen un menú de navegación como este. Nota: Enlace <a> is child of list item <li>. Quería cambiar el fondo del elemento de la lista seleccionada y eliminar el color de fondo del elemento de la lista no seleccionada.

<nav> 
     <ul> 
      <li><a href="#">Intro</a></li> 
      <li><a href="#">Size</a></li> 
      <li><a href="#">Play</a></li> 
      <li><a href="#">Food</a></li> 
     </ul> 
     <div class="clear"></div> 

     </nav>

He intentado añadir una clase .active en el elemento de la lista usando jQuery pero no estaba funcionando

.active 
{ 
    background-color: #480048; 
} 

$("nav li a").click(function() { 
     $(this).parent().addClass("active"); 
     $(this).parent().siblings().removeClass("active"); 
    });

Solución: Básicamente, usando la clase .active cambiar el color de fondo del elemento de la lista No funciona. Así que cambié el nombre de la clase css de .active a "nav li.active a", por lo que con el mismo javascript agregará la clase .active al elemento de la lista seleccionada. Ahora bien, si el elemento de lista <li> tiene clase .active continuación, css va a cambiar el color de fondo del hijo de ese elemento de la lista <a>.

nav li.active a 
{ 
    background-color: #480048; 
}

Fuente

2014-02-26 13:27:24 Goldfish

Artículo de la lista de cambio CSS color de fondo con clase

Respuesta

Cuestiones relacionadas