ホームページ  >  記事  >  ウェブフロントエンド  >  CSS クラス セレクターはどのようになりますか (コード)

CSS クラス セレクターはどのようになりますか (コード)

(*-*)浩
(*-*)浩オリジナル
2019-11-23 16:31:142915ブラウズ

CSS クラス セレクターはどのようになりますか (コード)

CSS では、クラス セレクターはドットで表示されます。 ##上記の例では、中心クラスを持つすべての HTML 要素中心にあります。

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

.center {text-align: center}

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

id ​​と同様に、クラスも派生セレクターとして使用できます。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
上の例では、要素内のファンシー テーブル セルという名前の大きなクラスが使用されます。灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は table または div である可能性があります)

要素はクラスに基づいて選択することもできます: 上記の

.fancy td {
	color: #f60;
	background: #666;
	}
この例では、tableクラス名が fancy のセルは、背景が灰色のオレンジ色になります。
td.fancy {
	color: #f60;
	background: #666;
	}

クラス fancy は、任意のテーブル要素に何度でも割り当てることができます。ファンシーでマークされたセルは、背景がグレーのオレンジ色になります。 fancy という名前のクラスが割り当てられていないセルは、このルールの影響を受けません。

また、ファンシー クラスの段落は灰色の背景のオレンジ色にはならないことにも注意してください。もちろん、ファンシーとしてマークされた他の要素は、このルールの影響を受けません。これはすべてこのルールの記述方法によるもので、効果はファンシーとしてマークされたテーブル セル (つまり、td 要素を使用してファンシー クラスを選択する) に限定されます。

以上がCSS クラス セレクターはどのようになりますか (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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