Diferentes niveles de CSS y la prioridad sobre el otro

Question

Estaba leyendo un artículo decente aquí sobre este tema: http://www.plus2net.com/html_tutorial/css-types.php Salió mejor clasificado por Google para el término de búsqueda de hojas de estilo de estilo css. ¡Sin embargo, creo que el sitio lo desinforma y está incompleto! ¿Alguien puede confirmar mis sospechas?

1) El estilo definido por el usuario es la segunda prioridad más baja. Para anular otros estilos con él, debe usar! Importante para moverlo al nivel más alto. 2) no menciona las prioridades relativas de <enlace> frente @import y @import dentro <enlace>

un ordenamiento más preciso sería (1 gana más de 2 etc): se define

1. Usuario (Preferencias del navegador importante! - [no Google Chrome!])
2. de hojas de estilo en línea (atributo de estilo en el nodo HTML)
3. hoja de estilo interna (<estilo> en <cabeza>)
4. hoja de estilos externa (@ import)
5. hoja de estilos externa (<enlace>)
6. hoja de estilos externa (@ importación dentro <enlace>)
7. definidos por el usuario - (Preferencias del navegador - [No Google Chrome])
8. predeterminado browser - (incluido con el navegador)

Michael Bowers Pro CSS & HTML Design Patterns es una buena fuente para este t oo. Pero no menciona en línea.

¿Falta algo más?

PD: Decía que faltaba algo importante de 2-8. Entonces el usuario definido aparece dos veces. Una vez con importante, la segunda vez sin eso. Entonces el usuario definido es, en esencia, el segundo más bajo. El! Importante puede aplicarse de forma natural en cualquier nivel.

Answer 1

En lugar de pensar en ello en términos de lo más importante y lo menos importante, piénselo como orden en cascada. Todos los estilos se aplican, pero el último aplicado es el que ves. Los estilos se aplican en el siguiente orden:

1. navegador por defecto
2. hoja de estilos externa (link o @import)
3. hoja de estilo interna estilo
4. Inline

dentro de cualquiera de la primera tres, los estilos se aplican de menos específico a más específico (luego de arriba a abajo si no se puede determinar el más específico). Por lo tanto, se aplicará un estilo de etiqueta seleccionada antes de un estilo de clase seleccionada, por lo tanto, si no están de acuerdo con el estilo que se debe aplicar, el seleccionado por la clase ganará. No existe una regla acerca de si primero deben aplicarse link o @import, por lo que se mezclarán entre sí y se aplicará la regla de menor a la más específica.

!important hace que un estilo menos específico se aplique después de uno más específico, y se aplica un estilo de hoja de estilo externo después de uno interno o uno en línea. Sin embargo, recomendaría no usar !important siempre que sea posible, ya que puede causar algunos resultados bastante confusos.