Ereditarietà e cascata CSS, calcolo del peso, important

Ereditarietà e cascata CSS, calcolo del peso, importante

2024-07-12

ereditarietà css

Gli elementi figli possono ereditare direttamente gli attributi di stile dell'elemento genitore che influenzeranno gli elementi figli, quindi per alcuni elementi non sono impostati stili e anche gli stili sono cambiati.

Cascata CSS

Diversi selettori selezionano lo stesso elemento e diversi attributi tra i selettori possono essere sovrapposti e gli stessi attributi verranno sovrascritti in base al peso.

Calcolo dei pesi

Peso: tag=1, categoria=10, id=100, riga(js)=1000
Controllare innanzitutto se l'elemento è selezionato. Se non è selezionato, il peso è 0. Se è selezionato, verrà calcolato quello con il peso maggiore. Se i pesi sono uguali, sarà lo stile finale scritto.

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

Nel codice precedente, sebbene il peso di .header p sia maggiore di quello di div p, l'attributo font-size di div p utilizza !important, quindi l'impostazione della dimensione del carattere di quello con il peso maggiore non avrà effetto.

Condivisione della tecnologia