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?
@extend .smallbox;
, que parece un cSS no estándar.@extend
, si hace lo que creo que hace, y usar ambos selectores en el mismo elemento..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; }
.smallbox-paysummary
que tenga una fuente más pequeña, ¿por qué la hace más pequeña en primer lugar?Respuestas:
Hay varias reglas (aplicadas en este orden):
!important
siempre tiene prioridad.En su caso su regla 3 que se aplica.
Especificidad para selectores únicos de mayor a menor:
#main
selects<div id="main">
).myclass
), selectores de atributos (ex .:[href=^https:]
) y pseudo-clases (ex .::hover
)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:hover
con#nav ul li.active a::after
#nav
):hover
y.active
)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 .
fuente
:hover
no es un selector de clases , sino un selector de pseudo-clases .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.
fuente
Lo que estamos viendo aquí se llama especificidad como lo afirma Mozilla :
Me gusta la explicación 0-0-0 en https://specifishity.com :
¡Bastante descriptiva la imagen de la
!important
directiva! Pero a veces es la única forma de anular elstyle
atributo en línea . Por lo tanto, es una buena práctica tratar de evitar ambos.fuente
En primer lugar, según su
@extend
directiva, 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
.smallbox
después.smallbox-paysummary
podrá 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:
fuente
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):
declaraciones de agente de usuario
declaraciones normales del usuario
declaraciones normales del autor
declaraciones importantes del autor
Más información al respecto en el referido documento W3
fuente
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-paysummary
se define después de,.smallbox
por lo tanto, la precedencia de 10px.fuente
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.
fuente
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:
... el ancho del div será 50px
fuente