2010-03-10 12 views
23

Si tengo dos archivos CSS:dos archivos CSS que definen misma clase

de archivos 1:

.colorme 
{ 
    background-color:Red; 
} 

Archivo 2:

.colorme 
{ 
    background-color:Green; 
} 

y los han incluido en una página, que se tendrá prioridad? Supongo que el que está cargado al último? Si es así, ¿hay alguna forma de garantizar qué archivo CSS se carga por última vez?

+1

Podría ayudar si usted no pensó en esto como "la definición de una clase". Está escribiendo conjuntos de reglas con selectores que coinciden con elementos. (Estos selectores particulares combinan elementos según su clase). A continuación, se aplica la cascada: http://www.w3.org/TR/CSS21/cascade.html#cascade – Quentin

+1

Si no tiene control sobre el orden de los archivos en el HTML, siempre puede asegurarse de que una regla gane con la bandera! important. – Tom

Respuesta

48

El último cargado (o como David señala, con mayor precisión incluido último) gana en este caso. Sin embargo, tenga en cuenta que es por propiedad, si carga 2 definiciones con diferentes propiedades, el resultado será la combinación. Si una propiedad está tanto en la primera como en la segunda, la última gana en esa propiedad.

La única manera de asegurarse de que se usa last/wins es incluir los elementos <link> en el orden que desee en la página.

Para la propiedad, aquí está un ejemplo:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css 
.class1 { color: blue; margin: 2px; } //Second .css 

es equivalente a:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; } 
+14

Para ser pedante: en realidad no es el último * cargado *, es el último que aparece en el orden de origen. Dada la carga asincrónica, podrías tener una hoja de estilo corta al final de la carga de "cabeza" antes de una larga al inicio. – Quentin

+0

@David - Buen punto que lo hace mucho más claro, actualizado –

+0

Me alegro de contribuir. – Quentin

Cuestiones relacionadas