ホームページ > 記事 > ウェブフロントエンド > CSS カスケード スタイルを理解する方法
CSS カスケード スタイルを理解する方法
- 清浅オリジナル
- 2019-02-28 11:40:164007ブラウズ
CSS カスケードは、ブラウザーの競合処理の機能です。CSS カスケード スタイルの競合には、参照モードの競合、継承モードの競合、および指定されたスタイルの競合があります。指定されたスタイルと継承されたスタイルのデバッグの間に競合がある場合、指定されたスタイルの競合が優先されます。
CSS には、継承、優先順位、カスケードという 3 つの主要な機能があります。今日紹介するのは、CSS の 3 つの主要な機能のカスケード的な性質であり、一定の参考価値があるものです。
[推奨コース: 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>効果画像は次のとおりです。
(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> レンダリングは次のとおりです:
(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>効果図は次のとおりです。
以上がCSS カスケード スタイルを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。