CSS `id` セレクターと `class` セレクターの違いは何ですか?

CSS の ID とクラスの違いを理解する

CSS の初心者にとって、ID とクラスの区別は混乱する可能性があります。どちらも HTML 要素にスタイルを適用できますが、目的は異なります。

クラス

クラスは、Web ページ全体で一貫して複数の要素にスタイルのセットを適用するために使用されます。 。これにより、すべてのコメント セクションの「comment」という名前のクラスや、すべてのアクション ボタンの「button」という名前のクラスなど、同様の特性を共有する要素をグループ化できます。重要なのは、要素に複数のクラスを同時に適用できるため、複雑なスタイルを定義できることです。

Id

一方、ID は要素を識別するために使用されます。ページ上の単一の固有の要素。各 ID は一意である必要があり、要素には 1 つの ID のみを割り当てることができます。これにより、ID は、メイン コンテンツ コンテナの「main」や Web ページ ヘッダーの「header」など、一度だけ存在する要素のスタイル設定に最適になります。

それぞれを使用する場合

次の場合に クラス を使用します。

• 類似のスタイルを複数のオブジェクトに適用したい場合
• 要素を複数のグループに所属させたい、または要素に複数のスタイルを適用したい。
• JavaScript を使用してスタイルを動的に追加または削除したい。

次の場合に id を使用します。

• 単一のスタイルを設定したい場合、ページ上に固有の要素があります。
• CSS または JavaScript を使用して、特定の要素を直接指定する必要があります。
• アンカーを使用して、ページ上の特定の要素へのリンクを作成したいと考えています。

例

提供されたコード内例:

• Web ページにメイン コンテンツ領域が 1 つしか含まれていない場合は、ID を指定して #main を使用するのが適切です。
• 次のことを計画している場合は、クラスで .main を使用する方が適しています。同じ Web ページ内に、サイドバーやフッターなど、同様のスタイルを持つ複数のセクションがあります。

以上がCSS `id` セレクターと `class` セレクターの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。