¿Cuál es la diferencia entre las reglas CSS `.class1.class2` y` .class1 .class2`?

tengo una tabla con algunas filas:¿Cuál es la diferencia entre las reglas CSS `.class1.class2` y` .class1 .class2`?

<table> 
    <tr class="even"><td>tr0</td></tr> 
    <tr><td>tr1</td></tr> 
    <tr class="even"><td>tr2</td></tr> 
</table>

Tengo una regla CSS (rule1) para las filas pares:

.even{ 
    background-color: blue; 
}

tengo otra regla (rule2) para la anulación de la bgcolor de cualquier fila :

.override, .override.even{ 
    background-color: green; 
}

lo extraño es IE9 en todos even filas (sin clase override) son de color verde!
Herramientas para desarrolladores muestra esto para even filas:

enter image description here

En estas dos condiciones, es decir hacer el trabajo correctamente:

Si vuelvo a escribir rule2 así:

.override, .override .even{ ... }

Si me mudo regla2 anterior regla1:

.override, .override.even{ ... } 
.even { ... }

Pregunta cuál es la diferencia entre .override.even y .override .even?

EDITAR:

Gracias por responder. Otra pregunta que me olvidé de preguntar es por qué IE muestra las filas even verdes?

Fuente

2011-10-21 Pedram Behroozi

.override .even = Seleccione cualquier elemento que tenga una clase de "par" que sea descendente de cualquier elemento que tenga una clase de "anulación" – Jawad

.override.even = Seleccione cualquier elemento que tenga una clase de "anulación" "o/e" incluso " – Jawad

Necesita tener algún código conflictivo en alguna parte. Cuando lo pruebo, las filas permanecen en color azul: http://jsfiddle.net/Guffa/e3w4q/ – Guffa

El espaciado entre los especificadores de clase significa una relación ascendente -> descendiente.

La regla:

.test .heading { font-weight: bold; }

se aplicaría al elemento <p> aquí:

<span class="test"><p class="heading">Something</p></span>

La falta de espacio significa que el elemento debe tener ambas clases para aplicar la regla.

La regla:

.heading.major { color: blue; }

se aplicaría al elemento <p> aquí:

<p class="heading major">Major heading</p>

Fuente

2011-10-21 19:39:27 Andre

Gracias. Pero ¿por qué en IE todas las filas 'pares' son verdes en lugar de azules? –

espaciado no significa relación padre -> hijo. Significa una relación descendente -> descendente. Un padre es necesariamente un descendiente, pero un padre no es necesariamente un padre. Un niño es necesariamente un descendiente, pero un descendiente no es necesariamente un niño. – Jawad

@Jawad: Muy bien, debidamente anotado y editado. – Andre

.override .even se interpreta como "algún elemento con una clase de 'anulación', con otro elemento con una clase .even anidado dentro. Es básicamente el mismo que ul li, pero se aplica a las clases de CSS.

override.even se interpreta como "un solo elemento con AMBOS anulaciones e incluso clases".

Fuente

2011-10-21 19:42:54

Ambas respuestas son correctas, pero no explican, por qué IE muestra ambas filas en verde.

Es porque IE tiene el modo "estándar" y "peculiaridades".Para hacer que varios selectores de clases funcionen, debe usar DOCTYPE apropiado al comienzo del archivo.

Ahora se encuentra en el modo "peculiaridades" y IE no admite varios selectores, solo ve la última clase. Por lo que ve esto y filas son de color verde:

.even { 
    background-color: blue; 
} 
.override, .even { 
    background-color: green; 
}

Deja

<!DOCTYPE html>

(u otra DOCTYPE) al principio del archivo y las dos filas van a ser azul como se esperaba.

Fuente

2011-10-21 19:53:24 Petr

¿Cómo sabes que está en modo peculiar? – Jawad

Porque tiene estas dos filas verdes y los selectores de clase múltiple no funcionan para él. Estas dos filas deben ser azules como lo son en otros navegadores. – Petr

+1 Esta es probablemente la razón. Ejecutar el violín al que me he vinculado en los comentarios en el modo peculiar crea las líneas con fondo verde. – Guffa

Véase el W3C [CSS] Selector (Level 3) "Recommendation":

.override .even es dossimple selectors separadas por un espacio (que es el descendant combinator, CSS es un espacio en blanco y minúsculas):

A veces, los autores pueden querer selectores para describir un elemento que es el descendiente de otro elemento en el árbol del documento (por ejemplo, "un elemento EM que está contenido dentro de un elemento H1"). Los combinadores descendientes expresan tal relación. Un combinador descendiente es un espacio en blanco que separa dos secuencias de selectores simples. Un selector de la forma "AB" representa un elemento B que es un descendiente arbitrario de algún elemento antepasado A.

Este selector coincidirá con elementos que tienen la clase evensi y sólo si existe un antepasado - ¡No necesariamente el padre! - elemento con la clase override. (A diferencia de caracteres en algunas películas, un elemento no es nunca su propio antepasado ;-)

.override.even es una simple selector sequence:

Una secuencia de selectores simples es una cadena de selectores simples que no están separados por un combinador. Siempre comienza con un selector de tipo o un selector universal. No se permite ningún otro selector de tipo o selector universal en la secuencia.

Una secuencia selector simple se evalúa como la conjunction de los selectores simples individuales aplicadas al mismo elemento: es decir, que sólo coincidirá elementos con ambos los overrideyeven clases aplicadas.

Happy coding.

Fuente

2011-10-21 19:58:25

¿Cuál es la diferencia entre las reglas CSS `.class1.class2` y` .class1 .class2`?

Respuesta

Cuestiones relacionadas