¿En qué orden tienen prioridad las definiciones CSS?

Las declaraciones CSS se aplican en este orden (de menor a mayor prioridad):

  • declaraciones de agente de usuario (los estilos predeterminados que su navegador aplica a los elementos)
  • declaraciones normales del usuario (la propia hoja de estilo del usuario si está usando una)
  • autor de declaraciones normales (esta es su hoja de estilo normal)
  • autor declaraciones importantes (cualquier cosa que sea importante)
  • declaraciones importantes del usuario (cualquier estilo importante de la hoja de estilo del usuario)

Cualquier regla conflictiva se resuelve primero dentro de cada nivel, a veces con especificidad o, en su defecto, gana la última regla. La especificidad es un número definido como:

  • a: 1 si la declaración es de un atributo de estilo en línea, 0 de lo contrario
  • b: el número de ID en el selector (#one #two sería 2)
  • c: el número de otros atributos y pseudo-clases (: el foco sería 1)
  • d: el número de nombres de elementos y pseudoelementos (div sería 1)

es decir, un estilo en línea tendría una especificidad de 1000, mientras que una declaración en su hoja de estilo podría tener una especificidad de 0100 o 0010, etc. – esta es la razón por la cual los estilos en línea anulan los estilos de las hojas de estilo.

Pero, dado que las reglas se aplican en el orden anterior, una regla importante en una hoja de estilo puede anular un estilo en línea (ya que los estilos importantes del autor se aplican después de los estilos normales del autor). p.ej:

  
 pags {
   color: negro! importante;
 }
 
 

Será negro

Las reglas en declaraciones posteriores tienen prioridad sobre las reglas en declaraciones anteriores, por lo que las declaraciones en una etiqueta de estilo pueden anular las declaraciones de una hoja de estilo vinculada si la etiqueta de estilo aparece después de la etiqueta de enlace. Las reglas significan que puede usar una hoja de estilo normal para anular la propia hoja de estilo de un usuario, pero nunca puede anular ningún estilo que el usuario marque como importante.

Sin agregar! Important, va (en orden de menor a mayor):

  1. Hojas de estilo enlazadas.
  2. Estilos de página (o estilos de encabezado, cualquier cosa dentro de un
  3. Estilo en línea.

! important anulará todo lo anterior, respectivamente. Por lo tanto, una hoja de estilo vinculada importante tendrá prioridad sobre todo a menos que haya un estilo importante en línea.

http://jsfiddle.net/byee/LQDjf/2/

No estoy completamente seguro acerca de los estilos de usuario: depende de la implementación del navegador, en cuyo caso puede considerarse una hoja de estilo vinculada, donde querrá usarlo. Es importante anular cualquier estilo que use el sitio web.

http://www-archive.mozilla.org/u ...

Así es como CSS prioriza o conecta en cascada:

  1. Primero, reúne todas las hojas de estilo como las del autor o codificador, las del lector, si las hay, y la hoja de estilos del navegador predeterminado.
  2. Encuentra todas las declaraciones que coinciden. Por ejemplo, busquemos específicamente la propiedad de tamaño de fuente, por lo que analiza todas las declaraciones de tamaño de fuente que tienen un selector que posiblemente podría seleccionar el elemento

    , revisa todas las hojas de estilo y extrae las reglas que coinciden

    y también tienen una propiedad de tamaño de fuente.

  3. Luego los ordena en orden de autor, lector, navegador, ya que lo más importante sería el Autor y el que menos prioridad sería el Navegador. Y si el usuario ha puesto! Importante, eso tiene la máxima prioridad y encabeza la lista.
  4. Lo siguiente sería ordenar todas las declaraciones por cuán específicas son, la regla es más específica si selecciona un elemento con mayor precisión; por ejemplo, el selector descendente “blockquote h1” es más específico que solo el selector “h1” porque solo selecciona

    s dentro de

    s.

  5. Finalmente, ordena las reglas en conflicto en el orden en que aparecen en su
    hojas de estilo individuales, de modo que las que aparecen más tarde (más cerca de la parte inferior) de sus respectivas hojas de estilo son más importantes.

¡Eso es! La primera regla en la lista ordenada es el ganador, y su propiedad de tamaño de fuente es
El que hay que usar.