技術共有

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 を使用しているため、ウェイトが大きい方のフォント サイズを設定しても効果はありません。

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便