CSSクラスセレクターの表現は何ですか?

#CSS クラス セレクター

クラス セレクターを使用すると、ドキュメント要素から独立した方法でスタイルを指定できます。このセレクターは、単独で使用することも、他の要素と組み合わせて使用​​することもできます。

ヒント: これらのセレクターは、ドキュメントが適切にマークアップされた後にのみ使用できるため、どちらのセレクターを使用する場合も通常、ある程度の検討と計画が必要です。

特定のデザイン要素に関係なくスタイルを適用するには、クラス セレクターを使用するのが最も一般的な方法です。

CSS では、クラス セレクターはピリオドで表示されます。例:

.center {text-align: center}

上の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。

次の HTML コードでは、h1 要素と p 要素の両方に中心クラスがあります。これは、両方が「.center」セレクターのルールに従うことを意味します。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

注: クラス名の最初の文字として数字を使用することはできません。 Mozilla や Firefox では動作しません。

他のセレクターとの組み合わせ

クラス セレクターは、要素セレクターなどの他のセレクターと組み合わせて使用​​できます。

たとえば、段落のみを赤いテキストで表示したい場合があります:

p.center{color:red;}

セレクターは、class 属性に center が含まれるすべての p 要素と一致しますが、他のタイプの要素には一致しません。このクラス属性が存在するかどうか。セレクター p.center は、「クラス属性値が center であるすべての段落」として解釈されます。 h1 要素は段落ではないため、このルールのセレクターはそれに一致しないため、h1 要素は赤色のテキストになりません。

h1 要素に別のスタイルを指定したい場合は、セレクター h1.center を使用できます:

p.center {color:red;}
h1.center {color:blue;}

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