CSSスタイルのカスケードの優先度を調整する方法-CSSチュートリアル-php.cn

CSSスタイルのカスケードの優先度を調整する方法

PHPz

リリース： 2024-02-23 14:15:03

オリジナル

1270 人が閲覧しました

CSS スタイルのカスケード最適化の方法

Web 開発では、CSS を使用して Web ページにスタイルとレイアウトを追加します。ただし、複数のスタイルルールが 1 つの要素に同時に適用されると、スタイルのカスケードの問題が発生します。この場合、スタイルの優先順位を調整する方法を理解する必要があります。この記事では、スタイルの優先順位を調整するいくつかの方法を説明し、具体的なコード例を示します。

CSS スタイルカスケードの優先順位は、次の要素によって決まります:

スタイルシートのソース: インラインスタイル > 内部スタイルシート > 外部スタイルシート
セレクターの特殊性: スタイルルールの具体性が高いほど、優先順位も高くなります。
スタイルルールの順序: 後で定義されたスタイルルールは、最初に定義されたスタイルルールを上書きします

以下では、これら 3 つの要素をそれぞれ紹介し、対応するコード例を示します。

スタイルシートのソース

インラインスタイルは、HTML タグに直接記述されたスタイルであり、最も高い優先度を持ちます。例:

<div style="color: red;">This is some text.</div>

ログイン後にコピー

内部スタイルシートは、<style>タグ内に記述されたスタイルであり、外部スタイルシートよりも優先されます。例:

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is some text.</p>
</body>

ログイン後にコピー

外部スタイルシートは、外部 CSS ファイルにリンクすることによって導入されるスタイルであり、優先度が最も低くなります。例:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

ログイン後にコピー

セレクターの特殊性

セレクターの特殊性は、次のルールによって計算できます:

インラインスタイル: 特異度は 1000
ID セレクター: 特異度は 100
クラスセレクター、属性セレクター、および擬似クラスセレクター: 特異度は 10
要素セレクターおよび擬似要素セレクター:特異性は 1

特異性の高いセレクターの優先順位が高くなります。例:

<style>
    p {
        color: red;
    }
    
    #myId {
        color: blue;
    }
    
    .myClass {
        color: green;
    }
</style>

<p>This is some text.</p>
<p id="myId">This is some text.</p>
<p class="myClass">This is some text.</p>

ログイン後にコピー

上記のコードでは、最初の  要素のテキストの色は赤で、2 番目の # のテキストの色は赤です。 ## 要素は青、3 番目の 要素のテキストの色は緑です。 ID セレクターが最も具体的であるためです。

複数のスタイルルールが同じセレクターと詳細度を持つ場合、後で定義されたスタイルルールが最初に定義されたスタイルルールを上書きします。例:

<style>
    p {
        color: red;
    }
    
    p {
        color: blue;
    }
</style>

<p>This is some text.</p>

ログイン後にコピー

上記のコードでは、

 要素のテキストの色は青です。これは、後で定義されたスタイル ルールが最初に定義されたスタイル ルールをオーバーライドするためです。

スタイルシートのソース、セレクターの特異性、スタイルルールの順序を習得することで、スタイルの優先順位をより適切に制御できるようになります。上記は、スタイルの優先順位を調整するためのいくつかの方法と対応するコード例です。

この記事が CSS スタイルのカスケードのチューニングに役立つことを願っています。

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