class はラベルを設定するクラスです。
id は、設定されたラベルの識別子です。
class 属性は、要素がどのスタイル クラスに属するかを指定するために使用されます。
たとえば、スタイル シートを追加できます。
.baobao { 色: ライム; 背景: #ff80c0 }
使用法: クラス = "バオバオ"
id 属性は、要素の一意のスタイルを定義するために使用されます。 CSS ルールなど:
#binbin { フォントサイズ: 大きい }
使用法: id="ビンビン"
ID は、名前と同じように、異なる構造やコンテンツを区別するために使用されるラベルです。同じ名前を持つ人が 2 人いると混乱が生じます。
クラスは、衣服と同じように、あらゆる構造やコンテンツに適用できるスタイルです。
概念的に言うと、これらは異なります。id は最初に構造/コンテンツを検索し、次にそのスタイルを定義します。class は最初にスタイルを定義し、それを複数の構造/コンテンツに適用します。
クラスは、ユーザー定義の基準に基づいて 1 つ以上の要素を定義するために使用されます。より適切な例えはスクリプトです。クラスはスクリプト内の各キャラクターのストーリーラインを定義できます。このクラスは CSS や JavaScript などを通じて使用できます。したがって、ページ上で class="Frodo"、class="Gandalf"、class="Aragorn" を使用して、さまざまなストーリー ラインを区別できます。もう 1 つの非常に重要な点は、ドキュメント内で Class を何度でも使用できることです。
ID に関しては、通常、ページ上に 1 回だけ表示されるマークを定義するために使用されます。ページ レイアウトの構造化レイアウトを実行する場合 (たとえば、ページは通常、ヘッダー、マストヘッド <マストヘッド>、コンテンツ領域、フッターなどで構成されます)、ID は一般に ID を使用するのが理想的です。 a 文書内で 1 回のみ使用できます。これらの要素が同じページに複数回出現することはほとんどありません。
一言でまとめると、クラスは繰り返し使用できますが、ID はページ内で 1 回しか使用できません。同じ ID を繰り返し使用しても、ほとんどのブラウザでは問題が発生しない可能性がありますが、これは標準に従って明らかに間違った使用であり、一部のブラウザでは実際に問題が発生する可能性があります。
実際のアプリケーションでは、テキスト レイアウトなどには Class の方が便利ですが、マクロ レイアウトやさまざまな要素のデザイン配置には ID の方が便利です。