CSS3セレクターの優先順位ルール-CSSチュートリアル-php.cn

CSS3セレクターの優先順位ルール

WBOY

リリース： 2024-02-19 14:51:06

オリジナル

679 人が閲覧しました

CSS3セレクターの優先順位ルール

CSS3 セレクターの優先順位

CSS では、セレクターの優先順位によって、要素に適用されるルールが決まります。複数のルールが同じ優先度を持つ場合、それらは出現する順序で適用されます。異なる優先順位を持つルールの場合、CSS は特定のアルゴリズムを使用して、どのルールが最終的に適用されるかを決定します。以下では、CSS3 におけるセレクターの優先順位を紹介し、具体的なコード例を示します。

CSS では、セレクターの優先順位は次の要素によって決まります:

インラインスタイル: インラインスタイルは、HTML 要素に直接適用されるスタイルです。これは、次の要素を追加することで実現されます。スタイル属性。最も優先度が高いのです。

例:

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

ログイン後にコピー

ID セレクター (ID セレクター): ID セレクターは要素の id 属性と照合され、# 記号で始まります。

例:

<div id="myDiv">This is my div.</div>

ログイン後にコピー

#myDiv {
  color: blue;
}

ログイン後にコピー

クラスセレクター、属性セレクター、および疑似クラスセレクター (クラスセレクター、属性セレクター、および疑似クラスセレクター): これらのセレクターはクラス名を渡します。、要素に一致する属性または疑似クラス。クラスセレクターは . 記号で始まり、属性セレクターは角かっこ [] で囲まれ、擬似クラスセレクターはコロン: で始まります。

例:

<div class="myClass">This is my class.</div>

ログイン後にコピー

.myClass {
  color: green;
}

[priority="high"] {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

ログイン後にコピー

要素セレクターと擬似要素セレクター: これらのセレクターは、要素名または擬似要素要素によって一致します。要素セレクターは要素名を直接使用し、擬似要素セレクターは :: 記号で始まります。

例:

<p>This is a paragraph.</p>

ログイン後にコピー

p {
  font-family: Arial;
}

p::first-letter {
  font-size: 24px;
}

ログイン後にコピー

同じ優先度を持つ複数のセレクターが表示される場合、CSS3 は次の順序を指定します: インラインスタイルシート > ID セレクター > クラスセレクター、属性セレクターおよび疑似クラスセレクター > ; 要素セレクターと疑似要素セレクター。

実際に使用しているとセレクタの競合が発生することがよくありますが、その際はセレクタの優先度に応じて競合を解決する必要があります。以下に例を示します。

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Selector Priority Example</title>
  <style>
    .myClass {
      color: blue;
    }

    #myDiv {
      color: red;
    }

    p {
      color: green;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    <p class="myClass">This is a paragraph inside a div.</p>
  </div>
</body>
</html>

ログイン後にコピー

上記の例では、div 要素の ID は「myDiv」、段落要素 p のクラス名は「myClass」で、p 要素は div 要素内にネストされています。インラインスタイルシートが最も優先されるため、段落要素の色は赤色になります。

概要: CSS3 のセレクターの優先順位は、インラインスタイルシート > ID セレクター > クラスセレクター、属性セレクター、疑似クラスセレクター > 要素セレクター、疑似要素セレクターです。 CSS スタイルを記述するときは、スタイルが期待どおりに要素に適用されるように、セレクターの優先順位に注意する必要があります。

以上がCSS3セレクターの優先順位ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。