Prioridad CSS

Publicado en 30 septiembre, 2014
#caja header h1 {color:blue; }
#caja .cabecera h1 {color: red; }
header h1 { color: lime; }
h1 { color: purple; }
h1 { color: grey; }

Si tenemos varios estilos coincidentes la prioridad es la siguiente:

  1. Estilos en linea
  2. ID
  3. Clase
  4. Etiqueta HTML

 

h1 { color: purple; }
h1 { color: grey; }

0,0,0,1

header h1 { color: lime; }

0,0,0,2

#caja .cabecera h1 {color: red; }

0,1,1,1

#caja header h1 {color:blue; }

0,1,0,2

 


La ganadora es:

#caja .cabecera h1 {color: red; }

ya que tiene 1 ID, 1 clase y 1 etiqueta HTML, mientras que:

 

#caja header h1 {color:blue; }

tiene 1 ID y 0 clases, dando igual que tambien tenga 2 etiquetas HTML.

En caso de que dos declaraciones tengan la misma puntuación será la última la que se use.

* Sacado del curso de HTML5, CSS3 y JS de MiriadaX.net


PRIORIDAD

  1. Preferencia del usuario en el navegador con ¡important
  2. CSS diseño con ¡important
  3. CSS diseño
  4. Preferencia del usuario en el navegador
  5. CSS por defecto del navegador

Sin respuestas to "Prioridad CSS"


    ¿Algo que comentar?