Orden de priorización cuando se usan archivos css múltiples contradictorios

Question

Al usar múltiples archivos CSS en la misma página y colisionan, ¿cómo sé cuál se va a utilizar? Por ejemplo, si uno dice fondo de cuerpo azul y el otro dice rojo.

Answer 1

respuesta rápida:

Si ambas piezas de CSS tienen el mismo specificity (por ejemplo, los dos son body{), a continuación, lo que se vuelve a llamar ÚLTIMO anulará la anterior.

PERO, si algo tiene mayor especificidad (un selector más específico), se usará independientemente del orden.

---

Ejemplo 1:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    .name { color: blue; } 
    .name { color: red; } 
</style> 

El ejemplo anterior hará que el color rojo. Ambos selectores son iguales y, por lo tanto, también tienen la misma especificidad. Y como CSS lee de arriba a abajo, primero le decimos que sea azul, pero luego lo anulamos diciéndole "no importa, hazlo rojo".

---

Ejemplo 2:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    #container .name { background-color: blue; } 
    .name { background-color: red; } 
</style> 

El ejemplo anterior hará que el color de fondo azul, a pesar de que el azul era en primer lugar porque el selector es more "specific".

---

Excepción (el uso de !important):

La inclusión de !important anulará tanto la especificidad y el orden, pero en mi opinión, sólo debe utilizarse si usted está tratando de meterse con una código de terceros en el que no tiene acceso para cambiarlo de otra manera.

---

CSS externa:

reglas de sobrescritura funcionan de la misma en los archivos CSS externos. Solo imagínenlos poniéndolos en penúltimo, de arriba a abajo. Los selectores llamados en el (los) primer (s) archivo (s) serán sobreescritos por selectores de especificidad idéntica en cualquier archivo subsiguiente. Pero la especificidad todavía prevalecerá sobre el orden dentro del mismo archivo o en múltiples archivos.

---

Como prueba:

En Chrome, Firefox y versiones modernas de IE (probablemente Safari también), puede hacer clic derecho sobre algo y haga clic en "Inspeccionar elemento". Esto le mostrará el código HTML así como cualquier CSS aplicado. A medida que se desplaza hacia abajo de la CSS (generalmente a la derecha), verá cosas tachadas, lo que significa que son CSS incorrectos o que se han sobrescrito. Para probar, puede modificar los selectores de CSS (en su propio código o directamente en el cuadro de herramientas del desarrollador) para hacerlos más específicos y ver si eso no se tacha ... etc. Juega con esa herramienta, es MUY útil.