CSS カスケードスタイルを理解する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

清浅

Feb 28, 2019 am 11:40 AM

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