Si hay dos o más reglas CSS que apuntan a lo mismo elemento, el selector con el valor de especificidad más alto "ganará", y su La declaración de estilo se aplicará a ese elemento HTML.
Piense en la especificidad como una puntuación/rango que determina qué declaración de estilo finalmente se aplica a un elemento.
Mire los siguientes ejemplos:
En este ejemplo, hemos utilizado el elemento "p" como selector y hemos especificado un color rojo. para este elemento. El texto será rojo:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Ahora, mire el ejemplo 2:
En este ejemplo, hemos agregado un selector de clase (llamado "prueba") y especificó un verde color para esta clase. El texto ahora será verde (aunque hayamos especificado un rojo color para el selector de elementos "p"). Esto se debe a que se proporciona el selector de clase. mayor prioridad:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Ahora, mire el ejemplo 3:
En este ejemplo, hemos agregado el selector de identificación (llamado "demo"). El texto ahora será azul, porque al selector de id se le da mayor prioridad:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Ahora, mire el ejemplo 4:
En este ejemplo, hemos agregado un estilo en línea para el elemento "p". El El texto ahora será rosa, porque el estilo en línea tiene la máxima prioridad:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Cada selector de CSS tiene su lugar en la jerarquía de especificidad.
Hay cuatro categorías que definen el nivel de especificidad de un selector:
1. Estilos en línea - Ejemplo:
<h1 style="color: pink;">
2. ID - Ejemplo:
#navbar
3. Clases, pseudoclases, selectores de atributos - Ejemplo:
.test, :hover, [href]
4. Elementos y pseudoelementos - Ejemplo:
h1, ::before
¡Memoriza cómo calcular la especificidad!
Comience en 0, agregue 100 por cada valor de ID, agregue 10 por cada valor de clase (o pseudoclase o selector de atributos), agregue 1 por cada selector de elemento o pseudoelemento.
Nota: El estilo en línea obtiene un valor de especificidad de 1000 y se ¡Siempre se le da la máxima prioridad!
Nota 2: Hay uno excepción a esta regla: si utiliza el !important regla, ¡incluso anulará los estilos en línea!
La siguiente tabla muestra algunos ejemplos sobre cómo calcular los valores de especificidad:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
¡El selector con el valor de especificidad más alto ganará y tendrá efecto!
Considere estos tres fragmentos de código:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>La especificidad de A es 1 (selector de un elemento)
La especificidad de B es 101 (una referencia de ID + un selector de elementos)
La especificidad de C es 1000 (estilo en línea)
Dado que la tercera regla (C) tiene el valor de especificidad más alto (1000), este estilo se aplicará la declaración.
Igual especificidad: gana la última norma - Si la misma regla se escribe dos veces en la hoja de estilo externa, entonces la última regla gana:
h1 {background-color: yellow;}
h1 {background-color: red;}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Los selectores de ID tienen una mayor especificidad que los selectores de atributos - Mire las siguientes tres líneas de código:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
la primera regla es más específica que las otras dos y, por lo tanto, será aplicada.
Los selectores contextuales son más específicos que un solo elemento selector: La hoja de estilo incrustada está más cerca del elemento al que se le va a aplicar estilo. Entonces en el siguiente situación
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>se aplicará esta última regla.
Un selector de clase supera a cualquier número de selectores de elementos : un selector de clase como .intro supera a h1, p, div, etc.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
El selector universal (*) y los valores heredados tienen una especificidad de 0 - ¡El selector universal (*) y los valores heredados se ignoran!