HTML要素にラベルを付けるときのクラスとIDの違いは何ですか?

今回は、

HTML要素にアノテーションを付ける際のclassとidの違いと、HTML要素にアノテーションを付ける際の注意事項についてご紹介します。実際のケースを見てみましょう。

Web ページには非常に複雑な HTML 構造があり、CSS を使用して関連するスタイルを定義する場合、これらの構造に対応するフラグを指定し、対応する CSS セレクターを作成して、割り当てられたスタイルを取得する必要があります。最も一般的に使用される 2 つのアノテーション属性は、id と class です。例:

<div class=”header” id=”header” ></div>

現在、Attribute selector などの選択メソッドがさらに追加されています。ただし、属性セレクターを使用することでidやclassを省略することは可能ですが、後のメンテナンスが不便であること、初期のブラウザとの互換性が低いこと、ブラウザの描画効率に影響を与えることなどの問題がありますので、使用はお勧めしません。したがって、さらに多くのオプションがありますが、CSS セレクターを構築するには要素名とともに id と class を使用することをお勧めします。
ID とクラスの両方で HTML 構造に注釈を付けることができるため、最初に何を使用するかを選択する必要がありますか?この記事ではこれについて説明します。

IDとクラスの違い

経験豊富な友達はこの部分をスキップしてください。

1. 一意性と再現性

id は Web ページ構造内でのみ一意であることができ、要素の ID を aa として指定した場合、ID が aa の HTML 要素は Web ページ内に表示されません。強力なブラウザは複数の重複 ID をサポートし、対応するスタイルを割り当てますが、これは標準では許可されていません。

逆に、Web ページの構造内でクラスを再利用することができ、ある要素のクラスを bb として指定し、次の要素のクラスをこれら 2 つの要素に適用できます。同時に。さらに、要素に複数のクラス属性値を指定して、複数の属性のスタイルを同時に取得することもできます。

2.CSSでは優先度が異なります

CSSセレクターでは、idとclassにスタイルを適用する優先度が異なります。 ID のスタイルの優先順位は、クラスのスタイルの優先順位よりも高くなります。ID が aa でクラスが bb の div に次のスタイルを指定すると、ブラウザの背景が赤色になります。

3. ジャンプ関数

id 属性を使用して、ページ上の div に aa として ID を指定すると、現在の URL の後に #aa を追加します。 ID aa の div の場所にジャンプします。例:百度百科事典の章ジャンプ。クラスにはこの機能はありません。

ID の代わりにクラスを使用する理由

クラスを使用する利点は何ですか?

1. 名前の付け方を減らす

複雑な構造に名前を付けるのは、ID を使用してラベルを付ける場合、各構造に名前を付ける必要があります。 Web ページには、同じスタイルと効果を持つ構造が多数あるため (例: 統一されたボタン スタイル)、共通のクラス スタイルを記述し、このクラスを同じスタイルを必要とするすべての構造に割り当てます。

2. 再利用性が高い

クラスは他の構造で再利用でき、特定の要素に複数のクラスを適用できるため、特定のクラススタイルの再利用性が高くなります。より極端な実用的なアプリケーションは、アトミック クラスです。例:

#aa{background:red;}   
.bb{background:blue;}

いくつかのクラスをできるだけ小さく簡潔に記述してから、このスタイルを必要とする要素 (例: 上記の float) のクラスを直接記述します (例: class = "fl")。

一般的なアプリケーションの場合、同じスタイルを必要とする一部の構造では、1 つのスタイルを記述し、これらの構造に同じクラスを割り当てるだけで済みます。これにより、高度なスタイル コードの再利用が実現でき、また、より便利になります。修正する。

3. 低優先度

クラスの優先度は、要素名よりも高く、 id よりも低くなります。低優先度の機能を使用すると、デバッグとスタイル カバレッジが容易になります。

以前に id を使用して要素をマークし、この要素のスタイルを変更したい場合は、対応する CSS スタイル コードを変更するか、特定のスタイルの ! important 強調構文を使用して元のスタイルを上書きすることしかできません。

要素が class でマークされている場合、要素に ID を直接追加し、要素 ID の CSS セレクターを構築して変更し、上書きします。

これらの特性のため、後のメンテナンスを容易にするためにクラスを使用して要素をマークするように努めるべきです。

4.id も必須です。

class は同時にマークする必要がある場所がたくさんあります。

5. アンカータグジャンプ

アンカータグを使ってページ上をジャンプしたい場合、クラスは繰り返し利用できるため、ジャンプ機能はありません。

6. 入力で使用されます

入力を使用するときは、通常、ラベルタグを使用してこの入力の機能を記述します。ラベルを入力に関連付けるには 2 つの方法があります。1 つは、ラベルの for 属性を使用する方法で、もう 1 つは、対応する入力をラベルで囲む方法です。明らかに最初の方法の方が柔軟で優れていますが、対応する入力に id 属性を指定する必要があります。

さらに、いくつかの特別な要件では ID も使用する必要がありますが、ここでは要約しません。

ベストな使い方の組み合わせ

class についてはこれまでも多くの批判があり、W3C は class タグを廃止すべきだという意見もありました。Stalker m も id 属性の熱心なユーザーでしたが、実践の過程でさらに多くのことを発見しました。など クラスの利点 代わりにクラスを使用してください。

より良い組み合わせは、クラスを使用してほとんどの要素と構造を指定し、特定の関数を必要とするごく少数の要素に ID アノテーションを使用することです。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

モバイル Web ページのコンテンツをアダプティブにする方法

テーブル内のコンテンツのオーバーフローに対処する方法

textarea の動的な残りの単語数を取得する方法

以上がHTML要素にラベルを付けるときのクラスとIDの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。