技術共有

CSS の継承とカスケード、重み計算、重要

2024-07-12

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

CSSの継承

子要素は、子要素に影響を与える親要素のスタイル属性を直接継承できるため、一部の要素にはスタイルが設定されておらず、スタイルも変更されています。

CSS カスケード

異なるセレクターは同じ要素を選択し、セレクター間の異なる属性を重ね合わせることができ、同じ属性は重みに応じて上書きされます。

重みの計算

重み: タグ = 1、カテゴリ = 10、id = 100、行 (js) = 1000
最初に要素が選択されているかどうかを確認します。選択されていない場合は、重みが 0 になります。重みが同じであれば、最大の重みが優先されます。書かれた。

重要

<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

上記のコードでは、.header p のウェイトが div p よりも大きいですが、div p の font-size 属性は ! important を使用しているため、ウェイトが大きい方のフォント サイズを設定しても効果はありません。