ホームページ > 記事 > ウェブフロントエンド > CSSのIDセレクターとクラスセレクターの違いは何ですか
CSSのIDセレクターとクラスセレクターの違いは何ですか
- 奋力向前オリジナル
- 2021-07-09 10:53:406722ブラウズ
前の記事 「CSS構文とは何ですか?」使い方とルールを詳しく紹介》CSS構文の使い方とルールを紹介します。次の記事では、CSS の ID セレクターとクラス セレクターを理解し、それらの違いを紹介します。 ！
#ID セレクターとクラス セレクターの概要
CSS で HTML 要素を使用する方法スタイル制御は CSS セレクターを通じて行われます。最も一般的に使用される 2 つのセレクターは、ID セレクターとクラス セレクターです。1. id セレクター
id セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。1、id セレクターは「#」で定義され、
#1) で始まります。 ID セレクターは「#」で定義されます。
次の 2 つの ID セレクターは、最初のものは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます。
#red {color:red;}
#green {color:green;}次の HTML コードでは、id 属性が red の p 要素は赤色で表示され、id 属性が green の p 要素は緑色で表示されます。 <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
2) ID セレクターは、#で始まる
#」で定義されます。
例:
1. #para1
2. {
3. text-align:center;
4. color:red;
5. }
2. クラス セレクター
1. クラス セレクターは次のとおりです。
をドット ".
" で表示します。クラス セレクターは、グループのスタイルを記述するために使用されます。要素のクラス セレクターは ID セレクターとは異なり、クラスは複数の要素で使用できます。 クラスセレクターは、HTMLではclass属性で表され、CSSではドット「.」で表示されます。
例:
次の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
レンダリング:
例:
次の例では、すべてのp 要素は、その要素のテキストを中央に配置するために使用されます。
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
レンダリング:
##クラス セレクターは、要素がクラスであるため、複数の HTML 要素で使用できます。属性は一意性を確保するために必要ありません。別の html 要素も複数のクラス属性値を持つことができ、値は「
」で区切られます。たとえば、 は問題ありません。
- 接頭辞記号 "
#" を id の前に追加する必要があります。かつクラスの前に接頭記号「
.」を追加する必要があります。 id 属性は通常、ページ内で 1 回のみ使用できますが、class は複数回参照できます。 - id はさまざまな構造やコンテンツを区別するための要素のタグとして使用され、class はあらゆる構造やコンテンツに適用できるスタイルです。
- レイアウトの考え方に関しては、通常、次の原則に従います。ID は最初にページの構造とコンテンツを決定し、次にそのスタイルを定義します。逆に、クラスはページの構造とコンテンツを定義します。まずクラスにスタイルを適用し、次に必要に応じてクラス スタイルをページ上のさまざまな要素やコンテンツに適用します。
- 現在、ブラウザでは同じ属性値を持つ複数の ID を同一ページ内に表示することができ、通常であれば正常に表示できますが、JavaScript を使用して要素を ID で制御する場合、エラーが発生します。
実際のアプリケーションでは、クラスはテキスト セクションやページ装飾でよく使用され、id はグランド レイアウトの実装や、含まれるブロックや含まれるボックスのスタイルのデザインによく使用されます。
概要: CSS では、要素に色を追加するために ID セレクターとクラス セレクターが使用され、ページ全体がカラフルになります。
- ID 属性は数字で始まってはなりません。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません
- ID 属性は、各 HTML ドキュメントで 1 回だけ使用できます。
- ##クラス セレクターの最初の文字には数字を使用できません。 Mozilla や Firefox では動作しません
- 注意してください
-
推奨学習: CSS ビデオ チュートリアル
以上がCSSのIDセレクターとクラスセレクターの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。