En este artículo, vamos a discutir cómo se calculan los puntos en la especificidad de CSS.
Especificidad CSS: El concepto de Especificidad CSS surge cuando más de una regla CSS apunta a un mismo elemento. En este punto, el selector con la especificidad más alta se considera como la prioridad más alta y se aplica al texto HTML.
Por ejemplo, el código CSS del selector de ID tiene mayor prioridad en comparación con el código CSS del selector de elementos.
La jerarquía de especificidad de los selectores de CSS se proporciona a continuación:
Jerarquía de especificidad
Cálculo de la especificidad: para cada selector de CSS hay diferentes puntos que se consideran al verificar la prioridad. A continuación se muestra la tabla que consta de varios selectores de CSS y los puntos asociados con ellos.
|
Selector de CSS |
Puntos |
|
CSS en línea |
1000 |
|
selector de identificación |
100 |
|
Selector de clase |
10 |
|
Selector de elementos |
1 |
Veamos algunos ejemplos sobre el cálculo de la especificidad.
|
Selector |
Valor de especificidad |
|
b |
1 |
|
b .classdemo |
1+10=11 |
|
b #idDemo |
1+100=101 |
|
CSS en línea |
1000 |
Veamos un programa de ejemplo sobre cómo se usa la especificidad CSS al aplicar un estilo a un elemento HTML.
Ejemplo 1: Intentemos aplicar el CSS para el contenido en el elemento <h2> usando el selector de clase, el selector de id y el CSS en línea y descubramos qué se aplica al texto en CSS.
Según la especificidad de CSS, en comparación con el selector de clase y el selector de id, el selector en línea tiene una alta prioridad debido a su alto puntaje de especificidad.
En el siguiente código, las puntuaciones de especificidad de cada tipo se dan a continuación:
|
Selector de CSS |
Puntuación de especificidad |
|
h2.nombre de clase |
(elemento + selector de clase) 1+10=11 |
|
h2#idNombre |
(elemento + idSelector) 1+100=101 |
|
<h2 class=”className”, id=”idName”, style=”color:blue;”> |
1000 |
Como el CSS en línea tiene un puntaje de especificidad alto en comparación con otros, este estilo particular (ESTyle especificado en CSS en línea) se aplica al texto en el elemento <h2>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2.className {
color: red;
}
h2#idName {
color: black;
}
</style>
</head>
<body>
<h2 class="className" , id="idName" ,
style="color:blue;">CSS Specificity</h2>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, hay dos tipos de selectores CSS para el mismo elemento <p>. En este caso, la especificidad de CSS se usa para encontrar cuál tiene mayor prioridad y aplica el estilo de mayor prioridad al elemento HTML. Aquí, el selector de identificación tiene un puntaje de especificidad alto, es decir, 100 en comparación con la clase, que es 10. Por lo tanto, el estilo CSS del selector de identificación se aplicará al texto en el elemento <p>.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.demoClass {
color: yellow;
}
#demoID {
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<center>
<h2>Welcome To GFG</h2>
<p id="demoID" class="demoClass">
Default code has been loaded into the Editor.</p>
</center>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por akhilvasabhaktula03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA