CSSのIDセレクターとクラスセレクターの違いは何ですか-CSSチュートリアル-php.cn

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

奋力向前

リリース： 2021-07-09 16:48:44

オリジナル

6773 人が閲覧しました

前の記事「CSS構文とは何ですか?」使い方とルールを詳しく紹介》CSS構文の使い方とルールを紹介します。次の記事では、CSS の ID セレクターとクラスセレクターを理解し、それらの違いを紹介します。！

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 セレクターは、#で始まる

に基づいています。 ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

HTML 要素は id 属性を使用して ID セレクターを設定し、CSS の 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>

ログイン後にコピー

レンダリング:

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

使用する特定の 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 要素も複数のクラス属性値を持つことができ、値は「