CSS
Explica cómo se calcula la especificidad de los selectores, cómo interactúa con la cascada y por qué conviene mantenerla baja y predecible.
La especificidad es el desempate entre selectores que ya compiten en el mismo origen, importancia y layer.
IDs | clases/atributos/pseudo-clases | tipos/pseudo-elementos.card { } /* 0-1-0 */
article.card { } /* 0-1-1 */
#app .card { } /* 1-1-0 */Un ID vence a cualquier cantidad de clases dentro de esta comparación.
* { } /* 0-0-0 */
.card > h2 /* 0-1-1 */*, espacios, >, + y ~ no añaden peso.
El atributo style se trata como una prioridad especial superior a reglas normales de autor, aunque !important puede superarlo según la cascada.
:is(.card, #featured) { }:is(), :not() y :has() toman la mayor especificidad de sus argumentos.
:where(#app .card) { }:where() siempre aporta cero.
:nth-child(2n of .featured, #hero) { }La pseudo-clase y su lista contribuyen según las reglas de especificidad aplicables; un ID interno puede elevar el resultado.
.card, #featured {
& .title { ... }
}La especificidad del nesting se comporta de forma relacionada con :is() y puede heredar el peso máximo de la lista exterior. No incluyas IDs accidentalmente.
.button.button.button { }Aumenta especificidad, pero suele indicar una arquitectura rota. No lo uses como práctica normal.
.button { color: red !important; }!important cambia el bucket de cascada. Luego la especificidad desempata contra otras declaraciones importantes comparables.
Una clase en una layer prioritaria puede vencer a un ID en otra layer. Mantener selectores simples y ordenar concerns con layers reduce guerras de especificidad.
:where() para defaults.Revisa la regla ganadora y la razón. Una declaración tachada puede perder por:
:where() tiene cero.:is(), :not() y :has() toman peso interno.¿Por qué diez clases no superan un ID?
Porque se compara primero la columna de IDs; una coincidencia allí gana antes de mirar cuántas clases existen.
Herencia y valores globales explica cómo se completa el valor cuando no existe una declaración ganadora.