Berbagi teknologi

Warisan dan cascading CSS, penghitungan bobot, penting

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

warisan css

Elemen anak dapat secara langsung mewarisi atribut gaya dari elemen induk yang akan memengaruhi elemen anak, sehingga beberapa elemen tidak memiliki gaya yang disetel dan gayanya juga telah berubah.

CSS mengalir

Penyeleksi yang berbeda memilih elemen yang sama, dan atribut yang berbeda antar penyeleksi dapat ditumpangkan, dan atribut yang sama akan ditimpa sesuai dengan bobotnya.

Perhitungan bobot

Berat: tag=1, kategori=10, id=100, baris(js)=1000
Periksa dulu apakah elemennya dipilih. Jika tidak dipilih, bobotnya 0. Jika dipilih, bobotnya dihitung. Elemen dengan bobot terbesar akan menang tertulis.

penting

<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

Pada kode di atas, walaupun bobot .header p lebih besar dari pada div p, atribut font-size dari div p menggunakan !important, jadi pengaturan ukuran font yang bobotnya lebih besar tidak akan berpengaruh.