ホームページ > 記事 > ウェブフロントエンド > CSS のスタイル オーバーライド原則の詳細な紹介を共有する
CSS のスタイル オーバーライド原則の詳細な紹介を共有する
- 黄舟オリジナル
- 2017-07-22 10:58:171413ブラウズ
ルール 1: 継承によりスタイルの競合が発生した場合、最も近い祖先が優先されます (最近傍原則)。
CSS の継承メカニズムにより、要素はそれを含む祖先要素からスタイルを継承できます。次の状況を考えてみましょう:
<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}
p {color:blue;}
</style>
</head>
<body>
<p>welcome to <strong>gaodayue的网络日志</strong>
</p>
</body>
</html>strong はそれぞれ body と p から color 属性を継承しますが、p は継承ツリー上にあるためです。はstrongに近いため、strongのテキストはpの青色を継承することになります。
ルール 2: 継承されたスタイルが直接指定されたスタイルと競合する場合、直接指定されたスタイルが優先されます (最も直接的な原則)。
上記の例で、
strong {color:red;} のように、strong 要素のスタイルも指定されている場合、ルール 2 に従って、strong のテキストは最終的に赤色で表示されます。
ルール 3: 直接指定されたスタイルが競合する場合、スタイルの重みが大きい方が優先されます。
スタイルの重みはスタイルセレクターによって異なります。重みは次の表で定義されます。
cssセレクターの重み
タグセレクター 1
クラスセレクター 10
IDセレクター 100
インラインスタイル 1000
疑似要素 (:first-child など) 1
疑似クラス (:link など) 10
はいインライン スタイルの重み > ID セレクター > クラス セレクター > タグ セレクターを参照してください。また、子孫セレクターの重みは、「# の重み」などの各項目の重みの合計です。 nav .current a」は 100 + 10 + 1 = 111 です。
ルール 4: スタイルの重みが同じ場合、後者が勝ちます。
次の状況を考えてみましょう
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>
.byline a {color:red;}p .email {color:blue;} ".byline a" と "p .email" はどちらも上記の a 要素を直接指定しており、重みは 11 です。ルール 4 によると、最終的な表示は青色です。
スタイル シートは外部にも内部にもできるため、ルール 4 は、外部スタイル シートが導入される順序 (および 2cdf5bf648cf2f33323966d7f58a7f3f 要素の順序)、および外部スタイル シートと外部スタイル シートの配置に注意を払うことを思い出させます。内部スタイルシート。一般に、内部スタイル シートはすべての外部スタイル シートの導入後、通常は 9c3bca370b5104690d9ef395f2c5f8d1 の前に表示されます。
ルール 5: !重要なスタイル属性はオーバーライドされません。
! important は、どうしても必要な場合に上記の 4 つのルールを破る「黄金の指」と見なすことができます。特定のスタイル属性を使用し、それがオーバーライドされないようにする必要がある場合は、属性値の後に ! important を追加できます。ルール 4 の例を例に挙げると、「.byline a {color:red ! important;}」を強制できます。リンクが赤く表示されます。ほとんどの場合、スタイルのオーバーライドは他の方法で制御でき、! important を悪用することはできません。
以上がCSS のスタイル オーバーライド原則の詳細な紹介を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。