CSSクラスとIDセレクターの違いは何ですか

違い: 1. id が css に対応する場合はスタイル セレクター "#" が使用され、class が css に対応する場合はスタイル セレクター "." が使用されます。 2. クラスはページ内で再利用できますが、ID はページ内で 1 回しか出現できないため、再利用できません。

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

CSS ID とクラスセレクター

HTML 要素に CSS スタイルを設定したい場合は、要素に「id」を設定する必要があります。そして「クラス」セレクター。

id ​​セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。 HTML 要素は id 属性を使用して ID セレクターを設定し、CSS の ID セレクターは「#」で定義されます。

次の 2 つの ID セレクター。1 つ目は要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます。

#red {color:red;}
#green {color:green;}

次の HTML code、id属性 id属性が緑色のp要素は赤色で表示され、id属性が緑色のp要素は緑色で表示されます。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

クラス セレクター

クラス セレクターは、要素のグループのスタイルを記述するために使用されます。クラス セレクターは、ID セレクターとは異なります。クラスは複数存在できます。要素を使用します。 クラス セレクターは、HTML では class 属性で表されます。CSS では、クラス セレクターはドット "." で表示されます:

.center {text‐align: center}

上の例では、すべての HTML が中央に配置されています。 class 要素はすべて中央に配置されます。

もちろん、クラスを使用して特定の HTML 要素を指定することもできます。 次の例では、すべての p 要素で class="center" を使用して要素のテキストを中央に配置します。

p.center {text‐align:center;}

#css の id と class の違い

1. 構文の違い:

id ​​は、スタイル セレクター "#" (シャープ記号) を使用する CSS に対応します。

クラスはスタイルセレクター「.」(英語の半角入力ピリオド)を使用したCSSに対応します。

2. 使用時間の違い:

class はページ内で再利用できますが、

id ​​はページ内に 1 回しか表示できないため、再利用できません

そこで、書いたCSSがページ内で繰り返し参照できるようにクラス内で書くようにして、作業量とコード量を減らしましょう。

(学習ビデオ共有:

css ビデオ チュートリアル)

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