Héritage CSS et cascade, calcul du poids, important

2024-07-12

héritage CSS

Les éléments enfants peuvent directement hériter des attributs de style de l'élément parent qui affecteront les éléments enfants, de sorte que certains éléments n'ont pas de styles définis et les styles ont également changé.

CSS en cascade

Différents sélecteurs sélectionnent le même élément, et différents attributs entre les sélecteurs peuvent être superposés, et les mêmes attributs seront écrasés en fonction du poids.

Calcul des poids

Poids : tag=1, catégorie=10, identifiant=100, ligne(js)=1000
Vérifiez d'abord si l'élément est sélectionné. S'il n'est pas sélectionné, le poids est 0. S'il est sélectionné, le poids est calculé. Celui avec le poids le plus élevé prévaudra. Si les poids sont les mêmes, le style final sera. écrit.

important

<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

Dans le code ci-dessus, bien que le poids de .header p soit supérieur à celui de div p, l'attribut font-size de div p utilise !important, donc la définition de la taille de police de celle avec le poids le plus élevé ne prendra pas effet.

Partage de technologie