Três características do css:
Cascata, herança, prioridade.
Empilhamento (cobertura):
- Diferentes valores de um mesmo atributo de um mesmo seletor entrarão em conflito, neste caso, o princípio da proximidade é adotado.
- Atributos diferentes do mesmo seletor não entrarão em conflito.
Exemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Style>
div {
color: red;
}
div {
color: blue;
}
</Style>
</head>
<body>
<div>就近原则显示蓝色</div>
</body>
</html>
Efeito de página:
herança:
- Tags filhas herdam certos estilos de tags pais
- Os atributos e cores relacionados ao texto serão herdados
- O comprimento, largura e margens da caixa não serão herdados
Exemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
/* 让div包含P标签，成为父标签 */
}
</style>
</head>
<body>
<div>
<p>此处p是子标签会继承父类的颜色，为红色</p>
</div>
</body>
</html>
Efeito da página da web:
Prioridade:
vários seletores são definidos para o mesmo elemento, atributos conflitantes, determine qual seletor deve ser usado
| Seletor ------------------- - | Peso --- ----- |
| Herança ou * ---------------------- | 0,0,0,0 |
| Seletor de elemento (rótulo) - | 0 , 0, 0, 1 |
| Seletor de classe, seletor de pseudoclasse | 0, 0, 1, 0 |
| seletor de id ------------- ------ | 0,1 , 0,0 | |
Estilo embutido ------------------ | 1,0,0,0 |
Mesmo tipo de seletor, adota o princípio de proximidade.
Os seletores compostos terão o direito de se sobrepor, a solução é adicionar pesos (sem transporte),
exemplo;
ul li {} os pesos são 0,0,0,1 + 0,0,0,1 = 0,0,0, 2
li {} peso 0, 0, 0, 1,
então escolha o seletor ul li