前のセクションでは、いくつかの基本的なセレクターを紹介しました。このセクションでは、id 属性と class 属性の違いを説明します。

これらは Web ページ全体を豊かでカラフルにするために連携します。要素のスタイルを定義するとき。 ID またはクラスを使用できます。しかし、この 2 つの違いにも注意を払う必要があります。

1. CSS スタイルシートで記述する場合、ID セレクターの前に接頭記号「#」を追加し、クラス セレクターの前に接頭記号「.」を追加する必要があります。

2. id 属性は通常、ページ内で 1 回のみ使用できますが、クラスは複数回参照できます。

3. ID はさまざまな構造やコンテンツを区別するための要素のタグとして使用され、クラスはあらゆる構造やコンテンツに適用できるスタイルです。

4. レイアウトの考え方に関しては、一般にこの原則に従います。ID は最初にページの構造とコンテンツを決定し、次にそのスタイルを定義します。逆に、クラスは最初にスタイルのタイプを定義し、次にスタイルを定義します。必要に応じて、クラス スタイルをさまざまな要素やコンテンツに適用します。

5. 現在、ブラウザでは同じ属性値を持つ複数の ID を同じページに表示できますが、JavaScript を使用して要素を制御するとエラーが発生します。

6. 実際のアプリケーションでは、クラスはテキストセクションやページの変更によく使用されますが、IDはグランドレイアウトの実装や、含まれるブロックや含まれるボックスのスタイルの設計によく使用されます。

注:

IDは、特に「個人」を指すものであり、優先度が高くユニークであるという性質を持っています。
ID と比較して、クラスの優先度は比較的中程度であり、具体的には「特定のグループ」を指します。
クラスを使用するには、オブジェクト指向の抽象概念を参照し、共通の属性を抽象化する必要があります。

ID は最初に構造/コンテンツを検索し、次にそのスタイルを定義します。
クラスは最初にスタイルを定義し、それを複数の構造/コンテンツに適用します。