Cuando la hoja de estilos que creamos se vuelve cada vez más compleja, el estilo de una etiqueta se verá afectado por más y más factores; esta influencia puede provenir de las etiquetas circundantes o de la propia etiqueta. A continuación, veamos la prioridad de los estilos CSS desde estos dos aspectos.
Herencia de CSS
La característica de herencia de CSS se refiere a que aquellas propiedades CSS aplicadas a una etiqueta se transmiten a sus etiquetas hijas. Observe la siguiente estructura HTML:
<div>
<p></p>
</div>
Si<div>hay un atributocolor: red, entonces este atributo será<p>heredado, es decir,<p>también posee el atributocolor: red。
Como se puede ver, cuando la página web es relativamente compleja y la estructura HTML está profundamente anidada, el estilo de una etiqueta se verá fuertemente influenciado por el estilo de sus etiquetas ancestras. Las reglas de influencia son:
Regla de prioridad CSS 1:Los estilos de los ancestros más cercanos tienen mayor prioridad que los de otros ancestros.
Ejemplo 1:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
Si llamamos "estilos ancestrales" a las propiedades que una etiqueta hereda de sus ancestros y que ella misma no posee, entonces los "estilos directos" son las propiedades que una etiqueta posee directamente. Así, tenemos la siguiente regla:
Regla de prioridad CSS 2:Los "estilos directos" tienen mayor prioridad que los "estilos ancestrales".
Ejemplo 2:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
Prioridad de los selectores
Arriba hablamos de las propiedades que una etiqueta hereda de sus ancestros; ahora hablemos de las propiedades propias de la etiqueta. Antes de discutir la prioridad de CSS, mencionemos los 7 selectores básicos de CSS:
Selector de ID, como #id{}
Selector de clase, como .class{}
Selector de atributo, como a[href="segmentfault.com.html"]{}
Selector de pseudoclase, como :hover{}
Selector de pseudoelemento, como ::before{}
Selector de etiqueta, como span{}
Selector universal, como *{}
Regla de prioridad CSS 3:Relación de prioridad: estilo en línea > selector de ID > selector de clase = selector de atributo = selector de pseudoclase > selector de etiqueta = selector de pseudoelemento
Ejemplo 3:
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
El color final es black, porque el estilo en línea tiene mayor prioridad que otros selectores.
Todos los selectores de CSS se componen de los 7 selectores básicos mencionados o de sus combinaciones; hay 3 formas de combinación:
Selector de descendientes: .father .child{}
Selector de hijo: .father > .child{}
Selector adyacente: .bro1 + .bro2{}
Cuando una etiqueta es seleccionada simultáneamente por varios selectores, necesitamos determinar la prioridad de estos. Tenemos la siguiente regla:
Regla de prioridad CSS 4:Cuente el número de selectores de ID en el selector (a), calcule la suma del número de selectores de clase, selectores de atributo y selectores de pseudoclase en el selector (b), y calcule la suma del número de selectores de etiqueta y selectores de pseudoelemento en el selector (c). Compare los valores en el orden de a, b, c; el mayor tiene mayor prioridad; si son iguales, compare el siguiente. Si al final los dos selectores tienen a, b y c iguales, se juzga según el "principio de cercanía".
Ejemplo 4:
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
Como se ve en la regla 4, el color de <span> es red.
¿Qué sucede si los estilos de una hoja de estilos externa y los de una hoja de estilos interna entran en conflicto? Esto está relacionado con la posición de la hoja de estilos en el archivo HTML. Cuanto más abajo esté la posición donde se aplica el estilo, mayor será su prioridad; de hecho, esto todavía puede explicarse con la regla 4.
Ejemplo 5:
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css.html">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
En cuanto al orden, el estilo interno está al final y es referenciado en último lugar, por lo que el color de fondo de <div> es blue.
En el código anterior,@importla declaración debe aparecer antes del estilo interno; de lo contrario, la importación del archivo no es válida. Por supuesto, no se recomienda usar@importla forma de referenciar archivos de estilo externos; la razón se puede ver en otro blog:Formas de introducir CSS。
CSS también proporciona un método que puede ignorar por completo las reglas anteriores. Cuando debas asegurar, de manera imprescindible, que una propiedad específica se aplique, puedes usar esta técnica.
Regla de prioridad CSS 5:Después de la propiedad se inserta!importantla propiedad tiene la prioridad más alta. Si también se inserta!important, entonces se vuelven a utilizar las reglas 3 y 4 para determinar la prioridad.
Ejemplo 6:
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
Aunque .father .son tiene un mayor peso, el atributo background en el selector p tiene insertado !important, por lo que el background de <p> es red.
Afirmación errónea
En el proceso de aprender CSS, es posible que hayas oído hablar de un concepto llamado "valor de peso del selector": el peso del selector de ID es 100, el del selector de clase es 10, el del selector de etiqueta es 1, y luego se suman para comparar. Aunque esta forma de entender es fácil de recordar en apariencia, en realidad es incorrecta.
Por ejemplo, hay dos selectores:
.class1.class2.class3 ... （共11个类） #id
Si usas el método de "suma" para calcular, pensarás que el peso del primero es 110 y el del segundo es 100, por lo que el primero debería ganar. Pero en realidad, el navegador elegirá el estilo del segundo (el de #id).
¿Por qué? Porque CSS no trata el peso de los selectores como una "suma decimal". La comparación de prioridad en CSS es esencialmente una comparación por niveles; puede entenderse como una comparación de cuatro dígitos:
- Estilo en línea: 1,0,0,0
- Selector de ID: 0,1,0,0
- Clase, selector de atributo, pseudoclase: 0,0,1,0
- Selector de etiqueta, pseudoelemento: 0,0,0,1
El navegador compara de izquierda a derecha, no suma. Aunque tengas muchísimos selectores de clase, no pueden superar a un selector de ID.
Por lo tanto, no vuelvas a calcular de la manera "100+10+1"; el peso no es un juego de suma, sino una comparación estructural por niveles.