CSS の . と の違い

CSS では、. と # は非常に一般的な 2 つの記号であり、どちらも要素を選択するために使用される識別子です。このうち、ドット (.) はクラス セレクターの指定に使用され、シャープ記号 (#) は ID セレクターの指定に使用されます。これら 2 つの識別子は非常に似ていますが、CSS における目的と効果は異なります。この記事では、それらの違いについて詳しく説明します。

1. セレクターの構文構造は異なります

CSS セレクターでは、クラス セレクターと ID セレクターの両方で、識別子の接頭辞として「.」と「#」を使用します。ただし、使用される際の文法構造には特定の違いがあります。クラス セレクターはセレクターの前に「.」 (ドット) を追加することで定義され、ID セレクターはセレクターの前に「#」 (ポンド記号) を追加することで定義されます。

たとえば、ページ上でクラス属性「example」を持つ要素を検索するには、以下に示すようにクラス セレクターを使用できます。

.example {
   color: red;
}

id 属性を持つ要素を検索するには"例"、以下に示すように、ID セレクターを使用できます:

#example {
   color: blue;
}

2. 異なる重み

CSS では、各セレクターには重み値があり、複数のルールがいつ適用されるかを指定するために使用されます。同じ要素のセレクターの優先順位に適用されます。クラスセレクターとIDセレクターの重み値は異なります。一般に、ID セレクターに対応する要素はユニークであるため、その重み値は比較的高くなります。それに対して、クラス セレクターは複数の要素に対応できるため、重み値は比較的低くなります。

複数のセレクターを使用して同じ要素のスタイルを定義する場合、セレクターのウェイト値が有効になります。 ID セレクターの代わりにクラス セレクターを使用している場合は、スタイル定義により具体的なセレクターを使用して重み値を増やすことができます。

3. 適用範囲の違い

クラス セレクターと ID セレクターのもう 1 つの違いは、適用範囲が異なることです。クラス セレクターは複数の要素に適用できますが、ID セレクターは一意の ID 値を持つ 1 つの要素にのみ適用できます。これが、通常、単一要素のスタイルを定義するために ID セレクターを使用し、要素のグループの共通スタイルを定義するためにクラス セレクターを使用する理由です。

たとえば、クラス セレクターを使用して、ページ上のすべての段落要素に適用される CSS ルール セットを定義できます。

p {
   font-size: 16px;
   font-weight: bold;
}

ID セレクターを使用して、次のような CSS ルール セットを定義します。 will ルールセットはページ上の唯一の h1 要素に適用されます:

#page-header {
   font-size: 24px;
   color: #000;
}

要約

CSS では、クラス セレクターと ID セレクターは両方とも要素を選択するために使用される識別子です。これらは非常に似ていますが、用途、重量、適用範囲が異なります。クラス セレクターは複数の要素に使用でき、その重みは比較的低いのに対し、ID セレクターは単一の要素に適しており、その重みは比較的高くなります。したがって、使用する場合は、特定のニーズに応じて適切なセレクターを選択する必要があります。

以上がCSS の . と の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。