Herança CSS e cascata, cálculo de peso, important

Herança CSS e cascata, cálculo de peso, importante

2024-07-12

herança css

Os elementos filhos podem herdar diretamente os atributos de estilo do elemento pai que afetarão os elementos filhos, portanto, alguns elementos não têm estilos definidos e os estilos também foram alterados.

CSS em cascata

Diferentes seletores selecionam o mesmo elemento, e diferentes atributos entre seletores podem ser sobrepostos, e os mesmos atributos serão sobrescritos de acordo com o peso.

Cálculo de pesos

Peso: tag=1, categoria=10, id=100, linha(js)=1000
Primeiro verifique se o elemento está selecionado. Se não estiver selecionado, o peso é 0. Se estiver selecionado, o peso será calculado. Se os pesos forem iguais, o estilo final será. escrito.

importante

<style>
		/*important只作用于当前的属性，强调非常重要，不会被后续的样式覆盖，但不影响当前的权重*/
		div p{
			color: pink;
			font-size: 15px !important;
		}
		.header p{
			color: red;
			font-size: 25px;
			
		}
	</style>
</head>
<body>
	<div class="header">
		<p>段落</p>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

No código acima, embora o peso de .header p seja maior que o de div p, o atributo font-size de div p usa !important, portanto, definir o tamanho da fonte daquele com maior peso não terá efeito.

Compartilhamento de tecnologia