html - pseudo - Comprender la prioridad/especificidad del selector de CSS
selectores css3 (4)
- Elemento
- Selectores de clase
- Selectores de ID
- 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á los detalles para mostrarlo.
Me gustaría entender cómo funcionan los selectores de CSS con colisiones de propiedades, cómo se selecciona una propiedad en lugar de 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:white;
}
<html>
<body>
<div id="my_id" class="my_class">hello</div>
</body>
</html>
Para alguien esto podría ser obvio, ¡pero no para mí!
¿Existe alguna guía o enlace donde finalmente pueda entender cómo funciona la prioridad del selector?
Lo que te interesa es la specificity .
Firebug es una gran herramienta para ayudar a inspeccionar esto. Pero otros navegadores también han incorporado herramientas para inspeccionar las reglas CSS aplicadas.
Puede consultar la respuesta completa aquí Documentación de Mozilla
Comience desde el más específico: selectores de id> selectores de clase> selectores de tipo (h1 normal, etiqueta p, etc.). Importante siempre gana, pero se considera una mala práctica. Consulte el enlace de arriba.
La mejor manera es experimentar con eso:
<!-- start class vs id -->
<p class="class1" id="id1">.class vs #id: The winner is #id</p>
<!-- upper vs bottom -->
<p id="id2">the very bottom is the winner</p>
<!--most specific is the winner -->
<p id="id3">the most specific</p>
<!--pseudo and target selector -->
<h3>pseudo vs type selector</h3>
<!-- !important is more important! -->
<h1 id="very-specific">HI! I am very important!</h1>
</body>
CSS:
#id1{
color: blue;
}
.class1{
color: red;
}
#id2{
color: yellow;
}
#id2{
color : green;
}
body p#id3{
color :orange;
}
body p{
color : purple;
}
body{
color : black;
}
h3::first-letter {
color: #ff0000;
}
h3{
color: CornflowerBlue ;
}
h1{
color: gray !important;
}
body h1#very-specific{
color: red;
}
Here''s un caso de prueba.
Voy a agregar un enlace a la especificación de CSS 2.1 y cómo se supone que los navegadores deben calcular la especificidad:
w3.org/TR/CSS2/cascade.html#specificity :
La especificidad de un selector se calcula de la siguiente manera:
- recuento 1 si la declaración es de un atributo ''estilo'' en lugar de una regla con un selector, 0 de lo contrario (= a) (En HTML, los valores del atributo "estilo" de un elemento son reglas de hoja 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 pseudo-clases en el selector (= c)
- contar el número de nombres de elementos y pseudo-elementos en el selector (= d)
- La especificidad se basa solo en la forma del selector. En particular, un selector de la forma "[id = p33]" se cuenta como un selector de atributos (a = 0, b = 0, c = 1, d = 0), incluso si el atributo id se define como una "ID". "en la DTD del documento fuente.
Concatenar los cuatro números abcd (en un sistema numérico con una base grande) da la especificidad.
Si las especificidades son iguales, entonces entra en juego la Sección 6.4.1 de CSS 2.1 :
- Finalmente, ordenar por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, esta última gana. Las declaraciones en hojas de estilo importadas se consideran antes de cualquier declaración en la propia hoja de estilo.
Tenga en cuenta que esto está hablando cuando el estilo está definido, no cuando se usa. Si las clases .a y .b tienen la misma especificidad, lo que esté definido en último lugar en la (s) hoja (s) de estilo gana. <p class="ab">...</p> y <p class="ba">...</p> tendrán un estilo idéntico, según el orden de definición de .a y .b .