CSS で ID セレクターとクラス セレクターを使用する方法

#私はよく id と class を使用してアプリケーション スタイルの範囲を指定します。ただし、id と class のどちらを正しく使用するか判断するのは困難です。この記事では、id と class の使用方法を紹介します。

#id ​​と class

id ​​は一意であり、class には多数の
## の違いがあります。 #ページ内に記述できるIDは1つだけですが、クラスには複数のIDを記述できます。

ただし、これは、ページに ID が 1 つしか表示されない場合に ID を使用する必要があるという意味ではありません。 IDの使用には制限があります。

ID とクラスの間にスタイルの競合がある場合、ID が優先されます

例を見てみましょう。

HTML

<p id="red" class="blue">ID和class优先级比较——文字颜色</p>

CSS

#red{
color:red;
}
.blue{
color:blue;
}

効果は次のとおりです:

に示されているフォント上の画像は赤色です。 はい、ID の優先順位がクラスの優先順位よりも高いため、最終的に表示される色は赤色になります。

ページ内のidにジャンプできます

idにリンクすると、該当のidの場所にジャンプできます。

<a name="#ananker name">跳转到id </a>

これは、ページの先頭にジャンプ機能を設定するためによく使用されます。

id ​​はどこで使用できますか

まず大前提として、クラスの使用には制限はありませんが、クラスには制限があります。 ID。

はっきり言ってこれはidを使わずにclassで記述しても問題ないことが多いので、使い分けを考えるよりも考えたほうが良いでしょう。 ID をどこで使用するか。

ID が使用される場所は「一意」または「最もよく行われた」ものです。

ページ内ジャンプ機能を追加したい場合

ページ内ジャンプ機能を使用する場合はクラスで実装できないため、idを使用してください。

「ユニーク」を設定できる場所で使用されます

ページ内には、タイトル、コンテンツ、サイドバー、フッターなどのページ パーツは基本的に 1 つだけあります。この種のことは、ID を使用して実装するのが簡単です。

クラス内の共通部分のまとめ、スタイルをオーバーライドするにはidを使用します

これはCSSを使用した仕様であり、クラスよりもidが優先されます。

Web ページはページに基づいた特定のレイアウトを持っていますが、類似した部分が多数あります。標準スタイルをクラスとして記述し、ID を使用して各ページの特徴的な部分を記述することで、CSS を圧縮できます。

id ​​のセレクタ照合処理が高速化

jQuery などを使用してセレクタの照合処理を行う場合、id を指定したほうが高速です。 id指定の場合はページ内で見つければ処理が完了しますが、クラスの場合は最後までスキャンする必要があるためです。

以上がCSS で ID セレクターとクラス セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。