html - soluciones - tecnicas para dar clases en secundaria

¿Cómo resuelven los navegadores las clases conflictivas?

Question

Sé que es posible especificar varias clases en un elemento en HTML:

<div class=''one two''>Text</div>

Parece que las clases son accesibles desde Javascript como una sola cadena.

¿Qué sucede cuando las clases se especifican con propiedades en conflicto? Por ejemplo

div.one {
background-color: red;
color: blue;
}
div.two {
background-color: green;
}

¿Dependerá el resultado del orden en que se especifican las clases? Por ejemplo, ¿podría razonablemente esperar que la división anterior aparezca con un texto azul y un fondo verde, porque las two clases se evalúan en segundo lugar, sobrescribiendo la propiedad de background-color ?

Answer 1

CSS tiene un orden de precedencia muy bien definido.

En casos como este, donde todo lo demás es igual y la prioridad es igual, el navegador debe elegir el estilo definido último en las hojas de estilo.

En el ejemplo que ha dado, esto significaría que los estilos div.one reemplazarán a div.one , donde la misma propiedad se define en ambos.

Por cierto, esta es también la misma característica que le permite definir múltiples estilos con la misma propiedad en el mismo selector, para admitir diferentes características del navegador. Por ejemplo, algunos navegadores pueden no ser compatibles con los colores rgba, por lo que puede hacer lo siguiente:

.myclass {
background: rgb(200, 54, 54);
background: rgba(200, 54, 54, 0.5);
}

Todos los navegadores seleccionarán la última declaración de background que admiten, por lo que los navegadores que admiten rgba seleccionarán la segunda, mientras que los navegadores que no lo hagan, se conformarán con la primera.

También es la razón por la que, cuando utiliza estilos con prefijo de proveedor, también debe especificar la versión sin prefijo después de las versiones con prefijo, de modo que cuando el navegador de ese proveedor empiece a admitir la versión sin estilo del estilo, puede estar seguro de que lo utilizará en lugar de la versión prefijada (que puede no ser compatible con todas las características de la versión final).

Answer 2

El resultado depende del orden en que se especifican las clases.

Aquí hay una buena reseña del orden en que se ejecutan las reglas de CSS: http://htmlhelp.com/reference/css/structure.html

Answer 3

Lea sobre la especificidad:

• Explicación simple
• Explicación más detallada.

Respuesta corta: si dos selectores tienen la misma especificidad, el último en ser declarado gana.

Answer 4

Lo que está utilizando para el estilo de estos se llaman "hojas de estilo en cascada". La parte en cascada significa que es como una cascada y las reglas futuras se basan en (o sobrescriben) las anteriores. Por lo tanto, la segunda regla sobrescribirá la propiedad de color de fondo, pero seguirá conservando el color de fuente.

(sin embargo, tenga cuidado con la precedencia. una regla que se apaga de un id tiene una prioridad más alta que una que se apaga de una clase independientemente de dónde se coloquen).

Answer 5

Si los selectores tienen el mismo nivel de precedencia (como lo hacen aquí), el que se especifique más adelante tendrá prioridad. En este caso, el fondo debe ser verde, pero el color de la fuente debe ser azul.

De la especificación de CSS :

Finalmente, ordene por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, la última especificada gana. Las declaraciones en hojas de estilo importadas se consideran antes que cualquier declaración en la hoja de estilo.

Answer 6

http://jsfiddle.net/mrtsherman/2NpXS/

Depende del orden de la hoja de estilo. Las últimas declaraciones de estilo tienen prioridad. Puedes invertir las dos líneas css para ver.