¿Cuál es el orden de precedencia de CSS?

109

Estoy tratando de averiguar por qué una de mis clases css parece anular a la otra (y no al revés)

Aquí tengo dos clases de css

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

y en mi opinión llamo

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

La fuente (el elemento superpuesto) aparece como 10px en lugar de 20; ¿alguien podría explicar por qué este es el caso?

Stephen
fuente
2
¿Está utilizando un preprocesador de CSS? Veo que tienes eso @extend .smallbox;, que parece un cSS no estándar.
Jared Farrish
Realmente no debería combinar @extend, si hace lo que creo que hace, y usar ambos selectores en el mismo elemento.
milimoose
SMACSS parece recomendar incluir solo las propiedades modificadas en una "subclase" (es decir .smallbox-paysummary) y, opcionalmente, hacer que la declaración CSS sea más claramente específica (sin depender del orden de aparición en el archivo CSS) utilizando.smallbox.smallbox-paysummary { font-size: 10px; }
millimoose
1
Y si NO desea .smallbox-paysummaryque tenga una fuente más pequeña, ¿por qué la hace más pequeña en primer lugar?
milimoose
Ahora me pregunto por qué si ambas reglas tienen la misma especificidad, la declarada más adelante en el atributo de clase del elemento no tiene prioridad, independientemente del orden de las reglas CSS.
Andy

Respuestas:

186

Hay varias reglas (aplicadas en este orden):

  1. css en línea (atributo de estilo html) anula las reglas css en la etiqueta de estilo y el archivo css
  2. un selector más específico tiene prioridad sobre uno menos específico
  3. las reglas que aparecen más adelante en el código anulan las reglas anteriores si ambas tienen la misma especificidad.
  4. Una regla CSS con !importantsiempre tiene prioridad.

En su caso su regla 3 que se aplica.

Especificidad para selectores únicos de mayor a menor:

  • ids (ejemplo: #mainselects <div id="main">)
  • clases (ex .: .myclass), selectores de atributos (ex .: [href=^https:]) y pseudo-clases (ex .: :hover)
  • elementos (ex .: div) y pseudo-elementos (ex .: ::before)

Para comparar la especificidad de dos selectores combinados, compare el número de apariciones de selectores únicos de cada uno de los grupos de especificidad anteriores.

Ejemplo: comparar #nav ul li a:hovercon#nav ul li.active a::after

  • cuente el número de selectores de id: hay uno para cada uno ( #nav)
  • contar el número de selectores de clase: hay uno para cada uno ( :hovery .active)
  • cuente el número de selectores de elementos: hay 3 ( ul li a) para el primero y 4 para el segundo ( ul li a ::after), por lo que el segundo selector combinado es más específico.

Un buen artículo sobre la especificidad del selector de CSS .

Lorenz Meyer
fuente
¿Cómo anula la especificidad las declaraciones de estilo en línea?
Jared Farrish
3
"... reglas CSS en la etiqueta de estilo ... anula las reglas en el archivo CSS". He visto este mito varias veces recientemente. No sé de dónde viene, pero es una tontería.
Alohci
@jared cambié los dos primeros puntos. ¿Es esto lo que quieres decir?
Lorenz Meyer
Sí, eso fue lo que quise decir.
Jared Farrish
2
@PakiPat :hoverno es un selector de clases , sino un selector de pseudo-clases .
Lorenz Meyer
30

Aquí hay una compilación del orden de estilo CSS en un diagrama, en el que las reglas CSS tienen mayor prioridad y tienen prioridad sobre el resto: Orden de estilo CSS

Descargo de responsabilidad : mi equipo y yo elaboramos esta pieza junto con una publicación de blog ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) que creo que será útil para todos los front-end desarrolladores.

Qin
fuente
3
Ese diagrama necesita una mentalidad especial. Para mí es mucho más difícil entender ese diagrama que la herencia de estilo en sí.
Lorenz Meyer
10

Lo que estamos viendo aquí se llama especificidad como lo afirma Mozilla :

La especificidad es el medio por el cual los navegadores deciden qué valores de propiedad CSS son los más relevantes para un elemento y, por lo tanto, se aplicarán. La especificidad se basa en las reglas de coincidencia que se componen de diferentes tipos de selectores CSS.

La especificidad es un peso que se aplica a una declaración CSS dada, determinada por el número de cada tipo de selector en el selector coincidente. Cuando varias declaraciones tienen la misma especificidad, la última declaración encontrada en CSS se aplica al elemento. La especificidad solo se aplica cuando el mismo elemento es el objetivo de varias declaraciones. Según las reglas de CSS, los elementos dirigidos directamente siempre tendrán prioridad sobre las reglas que un elemento hereda de su antepasado.

Me gusta la explicación 0-0-0 en https://specifishity.com :

ingrese la descripción de la imagen aquí

¡Bastante descriptiva la imagen de la !importantdirectiva! Pero a veces es la única forma de anular el styleatributo en línea . Por lo tanto, es una buena práctica tratar de evitar ambos.

AMS777
fuente
1
excelente. justo lo que estaba buscando. Este gráfico es magnífico lol.
saran3h
7

En primer lugar, según su @extenddirectiva, parece que no está utilizando CSS puro, sino un preprocesador como SASS os Stylus.

Ahora, cuando hablamos de "orden de precedencia" en CSS, hay una regla general involucrada: cualquier regla establecida después de que se apliquen otras reglas (de arriba hacia abajo). En su caso, con solo especificar .smallboxdespués .smallbox-paysummarypodrá cambiar la precedencia de sus reglas.

Sin embargo, si quieres ir un poco más allá, te sugiero esta lectura: Especificación CSS cascada W3C . Verá que la precedencia de una regla se basa en:

  1. El tipo de medio actual;
  2. Importancia;
  3. Origen;
  4. Especificidad del selector, y finalmente nuestra conocida regla:
  5. Cuál es el último especificado.
Renato
fuente
5

AS es el estado en W3: W3 Cascade CSS

El orden en que se aplican las diferentes hojas de estilo es el siguiente (cita de la sección en cascada de W3):

  1. declaraciones de agente de usuario

  2. declaraciones normales del usuario

  3. declaraciones normales del autor

  4. declaraciones importantes del autor

  5. declaraciones importantes del usuario

Más información al respecto en el referido documento W3

desarrollador libre
fuente
4

No importa el orden en que aparecen las clases en el elemento html, lo que cuenta es el orden en el que aparecen los bloques en la hoja de estilo.

En su caso, .smallbox-paysummaryse define después de, .smallboxpor lo tanto, la precedencia de 10px.

LifeQuery
fuente
4
Element, Pseudo Element: d = 1  (0,0,0,1)
Class, Pseudo class, Attribute: c = 1  (0,0,1,0)
Id: b = 1  (0,1,0,0)
Inline Style: a = 1  (1,0,0,0)

CSS en línea (atributo de estilo html) anula las reglas css en la etiqueta de estilo y el archivo css

Un selector más específico tiene prioridad sobre uno menos específico.

Las reglas que aparecen más adelante en el código anulan las reglas anteriores si ambas tienen la misma especificidad.

Lucky Chaturvedi
fuente
Aquí hay una buena explicación: vanseodesign.com/css/css-specificity-inheritance-cascaade
akostadinov
1
@Mahi Agité la edición sugerida esta vez, pero en el futuro, no agregue basura a una edición solo para que sea lo suficientemente larga. Tener una segunda edición que "deshaga" el daño de una primera es una práctica muy mala, muy poco intuitiva para los revisores y crea más trabajo del necesario. En su lugar, busque otras cosas que puedan mejorarse (como la ortografía o la gramática).
Siguza
0

También es importante tener en cuenta que cuando tiene dos estilos en un elemento HTML con igual precedencia, el navegador dará prioridad a los estilos que se escribieron en el DOM en último lugar ... así que si en el DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... el ancho del div será 50px

P. Avery
fuente
Esta no es realmente la precedencia, esta es la parte en cascada de las hojas de estilo en cascada.
TylerH