目次
html5 の class と id の違いは何ですか
ホームページ ウェブフロントエンド フロントエンドQ&A HTML5のクラスとIDの違いは何ですか

HTML5のクラスとIDの違いは何ですか

Mar 16, 2022 am 11:41 AM
html

違い: 1. スコープが異なります。クラスのスコープはより大きく、ID のスコープはより小さくなります。 2. 優先順位レベルが異なり、ID セレクターの優先順位が高く、クラス セレクターの優先順位が高くなります。の方が低い; 3. CSS での使用構文が異なり、class は「.」で選択され、id は「#」で選択されます。

HTML5のクラスとIDの違いは何ですか

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 の class と id の違いは何ですか

id ​​

は ID 番号に似た一意の識別子です。すぐにオブジェクトを作成し、それに対して操作を実行します。

id ​​を使用してラベル スタイルを変更する場合、#id を使用してラベル スタイルを表します。

Class

はクラスを指します。たとえば、同じスタイルのタグが 4 つあった場合、便宜上、これら 4 つのタグのスタイルを Class に置き、使用する必要がある場合は、この Class クラスから直接タグに継承させることで量を減らすことができます。コードの中で、4 つのタグを正確に制御する必要がある場合は、ID とクラスを使用して 1 つのタグを同時に制御できます。

Class を使用してラベル スタイルを変更する場合、.Class を使用してそれを表します。

違いは次のとおりです:

  • スコープ効果の違い: クラスのスコープは、個人 ID カードと同様に一意の識別子を表す id のスコープよりも大きく、一意であり、ページ上で 1 回だけ呼び出すことができます。通常、Web ページには 2 つ以上の ID が存在しません。クラスのスコープはさらに広く、クラスはクラスのラベルであり、インターフェイス内で複数回呼び出すことができます。再利用可能です。

  • 優先順位が異なります。ID セレクターの優先順位は、クラス セレクターの優先順位よりも高くなります。より重要なものについては、ID セレクターを使用できます。

  • 使用される構文は異なります。CSS での ID セレクターの使用方法 (例として div を使用するなど): (たとえば、 div id='i' などがあります。) .and div class=' c'...2 つの div ボックス、CSS で引用されたメソッドは次のとおりです:)

.c{
属性:属性值;
} 
#i{
属性:属性值;
}
ログイン後にコピー

推奨チュートリアル: "html ビデオ チュートリアル"

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles