Comprender la prioridad/especificidad del selector CSS
Me gustaría entender cómo funcionan los selectores de CSS con las colisiones de propiedades. ¿Cómo se selecciona una propiedad sobre otra?
div {
background-color: red;
}
div.my_class {
background-color: black;
}
div#my_id {
background-color: blue;
}
body div {
background-color: green;
}
body>div {
background-color: orange;
}
body>div#my_id {
background-color: pink;
}<div id="my_id" class="my_class">hello</div>¿Cómo funciona la prioridad del selector?
Simplemente agregaré un enlace a la especificación CSS 2.1 en sí y a cómo se supone que los navegadores deben calcular la especificidad:
CSS 2.1 Sección 6.4.3 :
La especificidad de un selector se calcula de la siguiente manera:
- cuente 1 si la declaración es de es un atributo de 'estilo' en lugar de una regla con un selector, 0 en caso contrario (= a) (En HTML, los valores del atributo "estilo" de un elemento son reglas de hojas de estilo. Estas reglas no tienen selectores, entonces a=1, b=0, c=0 y d=0.)
- contar el número de atributos de ID en el selector (= b)
- contar el número de otros atributos y pseudoclases en el selector (= c)
- contar el número de nombres de elementos y pseudoelementos en el selector (= d)
- La especificidad se basa únicamente en la forma del selector. En particular, un selector de la forma "[id=p33]" se cuenta como un selector de atributo (a=0, b=0, c=1, d=0), incluso si el atributo id se define como un "ID " en la DTD del documento fuente.
La especificidad se obtiene concatenando los cuatro números abcd (en un sistema numérico con una base grande).
Si las especificidades son iguales, entonces entra en juego la Sección 6.4.1 de CSS 2.1 :
- Finalmente, ordene por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, gana la última especificada. Se considera que las declaraciones en hojas de estilo importadas son anteriores a cualquier declaración en la propia hoja de estilo.
Tenga en cuenta que esto se refiere a cuándo se define el estilo, no a cuándo se utiliza. Si las clases .ay .btienen la misma especificidad, gana la que esté definida en último lugar en las hojas de estilo . <p class="a b">...</p>y <p class="b a">...</p> tendrá un estilo idéntico, según el orden de definición de .ay .b.
- Elemento
- Selectores de clase
- Selectores de identificación
- Estilos en línea
- !importante
En orden, 1 es la especificidad más baja y 5 es la más alta. https://youtu.be/NqDb9GfMXuo mostrará detalles para realizar una demostración.
