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

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?

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 .

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:

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.

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 :

¡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.

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.

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

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.

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.

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