ホームページ  >  記事  >  ウェブフロントエンド  >  CSS カスケード スタイルを理解する方法

CSS カスケード スタイルを理解する方法

清浅
清浅オリジナル
2019-02-28 11:40:164021ブラウズ

CSS カスケードは、ブラウザーの競合処理の機能です。CSS カスケード スタイルの競合には、参照モードの競合、継承モードの競合、および指定されたスタイルの競合があります。指定されたスタイルと継承されたスタイルのデバッグの間に競合がある場合、指定されたスタイルの競合が優先されます。

CSS には、継承、優先順位、カスケードという 3 つの主要な機能があります。今日紹介するのは、CSS の 3 つの主要な機能のカスケード的な性質であり、一定の参考価値があるものです。

CSS カスケード スタイルを理解する方法

[推奨コース: CSS チュートリアル]

CSS カスケード

CSS カスケードとはブラウザ処理 競合の特徴は、属性に複数のセレクターが設定されている場合、現時点では 1 つのセレクターのみが有効になり、他のセレクターはカスケード部分によって削除されることです。

カスケードの条件

(1) 要素が同じである

(2) 属性が同じである

( 3) 優先順位が同じである

カスケード スタイルの競合

(1) 参照メソッドの競合

CSS 参照メソッドには次のものがあります。インライン スタイル、インライン スタイル、インポート スタイル、リンク スタイル、4 つの優先順位はインライン スタイル > 埋め込みスタイル > インポート スタイル > リンク スタイルです。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
	body{
		background-color: pink;
	}
</style>
<body>
	<h1 style="background-color: red">优先级</h1>
</body>
</html>

効果画像は次のとおりです。

CSS カスケード スタイルを理解する方法

(2) 継承モードの競合

CSS には、自分で設定する場合のプロパティがいくつかあります。たとえば、CSSで設定した色、フォントサイズ、フォントの形状、配置などの属性値が子孫に引き継がれます。ただし、ボックス、位置、レイアウトなどの属性に関しては継承は発生しません。

継承メソッドの競合は、すべての親要素ではなく、それ自体に最も近い親要素を表示することです。

例:

<style type="text/css">
		body{
			color: pink;
		}
		#father{
			color: red;
		}
		#grandfather{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<h1>继承冲突</h1>
			</div>
		</div>
	</div>

レンダリングは次のとおりです:

CSS カスケード スタイルを理解する方法

(3) スタイルの競合を指定します

場合によっては、重みの違いにより競合が発生する可能性があると指定します。ここで、重みが同じ場合にのみ「後発優先」の原則が使用されることにも注意してください。

<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>
<body>
	<div id="son" class="father">
		<h1>继承冲突</h1>
	</div>
</body>

効果図は次のとおりです。

Image 080.png

ID セレクターの重みは 100、要素セレクターの重みは 1 であるため、表示される最終的なフォントの色は、ID セレクターに設定された属性になります。

注: 継承されたスタイルが指定されたスタイルがページ上で同時に競合する場合は、スタイルを優先するように指定します。物件が決まったら!重要な場合は優先順位を変更でき、スタイルを他のスタイルにオーバーライドできます。

要約: 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がCSS カスケード スタイルを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。