Tabla de contenido
Prioridad de los selectores comunes (de mayor a menor)
Prefacio:
En los artículos anteriores, presentamos una gran cantidad de selectores, por lo que cuando se utiliza una gran cantidad de selectores, deben tener un orden de prioridad. Por lo tanto, en este artículo, presentaremos la relación de prioridad entre cada selector en detalle.
Prioridad de los selectores comunes (de mayor a menor)
1. Estilos en línea:
- El selector con mayor prioridad.
- Definiendo estilos directamente en el atributo de estilo del elemento HTML.
- Código de muestra:
<div style="color: red;">This is a div with inline style.</div>
2. Selectores de ID (selectores de ID):
- Seleccione agregando el atributo id al elemento y usando el símbolo #.
- Código de muestra:
#myDiv
{
color: blue;
}
<div id="myDiv">This is a div with ID selector.</div>3. Selectores de clase (Class selectors):
- Añadiendo el atributo de clase al elemento y utilizando el símbolo .para seleccionar.
- Código de muestra:
.myClass {
color: green;
}
<div class="myClass">This is a div with class selector.</div>4. Selectores de atributos:
- Seleccionar por atributos del elemento.
- Código de muestra:
input[type="text"]
{
border: 1px solid gray;
}
<input type="text" />
5. Selectores de pseudoclase:
- Seleccionan por estado especial del elemento.
- Código de muestra:
<a href="#">This is a link.</a>
a:hover
{
text-decoration: underline;
}
6. Selectores de elementos:
- Seleccionar por nombre de etiqueta del elemento.
- Código de muestra:
<h1>This is a heading.</h1>
h1
{
font-size: 24px;
}
En una hoja de estilo, si se aplican varios selectores al mismo elemento, los estilos de los selectores de mayor prioridad anularán los estilos de los selectores de menor prioridad. La aplicación adecuada de los estilos puede garantizarse mediante el uso juicioso de los selectores.
Pesos del selector:
El peso de un selector CSS es un valor que se utiliza para determinar la prioridad del selector, que determina qué reglas de estilo del selector se aplican cuando se aplican varios selectores al mismo elemento.
Los pesos del selector de CSS se pueden calcular de acuerdo con las siguientes reglas:
1. Los estilos en línea tienen un peso de 1000 . Los estilos en línea son reglas de estilo definidas directamente en el atributo `estilo` de un elemento.
2. El selector de ID tiene un peso de 100 . Los selectores de ID están representados por `#`, como `#myElement`.
3. Los selectores de clase, los selectores de atributo y los selectores de pseudoclase tienen un peso de 10. Los selectores de clase están representados por `.`, los selectores de atributo están representados por `[]` y los selectores de pseudoclase están representados por `:`.
4. Los selectores de etiquetas y los selectores de pseudoelementos tienen un peso de 1. Un selector de etiquetas es un selector expresado directamente usando nombres de etiquetas HTML, como `div`, `p`, `a`. Los selectores de pseudoelementos están representados por `::`, como ::before, ::after.
Cuando se aplican múltiples selectores al mismo elemento, el motor CSS comparará los pesos de los selectores y aplicará primero las reglas de estilo con pesos más altos. Para selectores con el mismo peso, las reglas de estilo definidas más adelante anularán las reglas de estilo definidas anteriormente.
Cabe señalar que el cálculo del peso es independiente y no se ve afectado por la posición específica del selector o el orden de la declaración de estilo. Es decir, sin importar en qué hoja de estilo se encuentre el selector, o el orden de las reglas de estilo, el cálculo del peso se realiza de acuerdo con el propio selector.
Si se usa una declaración de importancia `!important` en el cálculo del peso , entonces esa regla de estilo tendrá la prioridad más alta, independientemente de los pesos de otros selectores.
En resumen, los pesos de selector proporcionan un mecanismo para administrar y controlar la prioridad de estilo de diferentes selectores cuando se aplican a los elementos. El uso juicioso de los pesos del selector garantiza la aplicación adecuada y la anulación de las reglas de estilo.
Caso de cálculo:
En CSS, los selectores múltiples se pueden combinar usando comas para formar un selector compuesto. Cuando se utilizan selectores compuestos, cada selector calcula su peso individualmente y el peso final es la suma de todos los pesos de los selectores.
Para los selectores compuestos (a, b, c), los pesos de cada selector se calcularán por separado y luego se sumarán para obtener el peso final.
Por ejemplo, para el selector `div.container, .myClass, #myId`, calcularemos el peso de la siguiente manera:
- Para el selector `div.container`, consta de un selector de etiqueta y un selector de clase. Los selectores de etiqueta tienen un peso de 1, mientras que los selectores de clase tienen un peso de 10. Por lo tanto, `div.container` tiene un peso de 1 + 10 = 11.
- Para el selector `.myClass`, solo tiene un selector de clase con un peso de 10.
- Para el selector `#myId`, solo tiene un selector de ID con un peso de 100.
- Finalmente, suma los pesos de los tres selectores: 11 + 10 + 100 = 121.
Por lo tanto, la combinación de selector `(div.container, .myClass, #myId)` tiene un peso de 121.
Algunos (a, b, c) también registrarán directamente el número de selectores actuales, por ejemplo:
Sería bueno comparar directamente el número de cada bit al comparar, pero en realidad es lo mismo que introdujimos, y después de que escribimos un selector, el compilador también nos informará del peso del selector actual.
Al aplicar reglas de estilo, se aplicará al elemento la regla de estilo del selector con mayor peso. Si varios selectores tienen el mismo peso más alto, tendrá prioridad la regla de estilo definida en último lugar.
Cabe señalar que el cálculo del peso sigue las reglas de prioridad del selector, entre las cuales el selector de ID tiene el peso más alto, seguido del selector de clase y el selector de atributos, y finalmente el selector de etiquetas. Por lo tanto, al calcular el peso de un selector compuesto, debe calcularse a partir de los pesos de los selectores individuales y sumarse.
Resumir:
En este artículo, presentamos en detalle la prioridad y el método de cálculo del selector. Cuando escribamos proyectos front-end a gran escala en el futuro, con frecuencia ajustaremos la prioridad del selector para lograr el estilo que necesitamos, por lo que debemos dominar bien este capítulo.
Si mi contenido es útil para ti, dale me gusta, comenta y marca . ¡La creación no es fácil, el apoyo de todos es mi motivación para perseverar!
