Directorio de artículos
1. Apilabilidad
Si el mismo selector establece el mismo estilo, un estilo sobrescribirá al otro estilo en conflicto.
Principio: Cuando
hay un conflicto, qué estilo está más cerca de la estructura, qué estilo se ejecuta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
color: black;
}
div {
color: red;
}
</style>
<body>
<div>
你好
</div>
</body>
</html>
2. Herencia
2.1. Herencia ordinaria
Las etiquetas secundarias heredarán ciertos estilos de la etiqueta principal (texto, fuente, línea, estos estilos se pueden heredar, así como el color), como la fuente del texto y el número de color.
<style>
div {
color: red;
}
</style>
<body>
<div>
<p>你好</p>
</div>
</body>
Aquí la fuente del div se establece en rojo, y finalmente la fuente en p también será roja.
2.2 Especial: herencia de la altura de la fila
En el desarrollo real, la altura de la línea a menudo se escribe así (el número después de la barra ya no es un px):
font：12px/1.5 "微软雅黑"
Este 1,5 es 1,5 veces el tamaño del texto del elemento actual
La altura de la línea correspondiente al siguiente código es 30px * 1.5 = 45px
style>
body {
font: 20px/1.5 "微软雅黑";
}
div{
font-size: 30px;
}
</style>
<body>
<div>
你好
</div>
</body>
La ventaja de este método: los subelementos pueden ajustar automáticamente la altura de la línea de acuerdo con su propio tamaño de texto.
3. Prioridad
Si se especifican varios selectores para el mismo elemento, se generará prioridad:
- Los selectores son los mismos y se realiza una cascada.
- El selector es diferente según el peso del selector.
Tabla de peso:
tal como:
<style>
body {
font-size: 12px;
}
div{
font-size: 20px;
}
.one {
font-size: 40px;
}
</style>
<body>
<div class="one">你好</div>
</body>
Obviamente, el tamaño de fuente final es 40px.
4. Superposición de derechos
Mirando este fragmento de código, las etiquetas son las mismas. Entonces, ¿no debería usar en cascada? Use el que esté más cerca. ¿No debería ser negro? ¿Por qué es rojo al final? ——Esto implica el problema de la superposición de pesos de selectores compuestos .
Aquí ul li son dos selectores de elementos, entonces 0,0,0,1 + 0,0,0,1 = 0,0,0,2, este es el peso de este selector compuesto.
<style>
ul li {
color: red;
}
li {
color: black;
}
</style>
<body>
<ul>
<li>你好</li>
</ul>
</body>
Otros ejemplos:
