CSS のスタイルオーバーライド原則の詳細な紹介を共有する-CSSチュートリアル-php.cn

CSS のスタイルオーバーライド原則の詳細な紹介を共有する

黄舟

リリース： 2017-07-22 10:58:17

オリジナル

1507 人が閲覧しました

ルール 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 は、外部スタイルシートが導入される順序 (および要素の順序)、および外部スタイルシートと外部スタイルシートの配置に注意を払うことを思い出させます。内部スタイルシート。一般に、内部スタイルシートはすべての外部スタイルシートの導入後、通常は

の前に表示されます。

ルール 5: !重要なスタイル属性はオーバーライドされません。
! important は、どうしても必要な場合に上記の 4 つのルールを破る「黄金の指」と見なすことができます。特定のスタイル属性を使用し、それがオーバーライドされないようにする必要がある場合は、属性値の後に ! important を追加できます。ルール 4 の例を例に挙げると、「.byline a {color:red ! important;}」を強制できます。リンクが赤く表示されます。ほとんどの場合、スタイルのオーバーライドは他の方法で制御でき、! important を悪用することはできません。

以上がCSS のスタイルオーバーライド原則の詳細な紹介を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。