ホームページ  >  記事  >  ウェブフロントエンド  >  HTML で同じクラス名の異なる要素に CSS スタイルを適用するにはどうすればよいですか?

HTML で同じクラス名の異なる要素に CSS スタイルを適用するにはどうすればよいですか?

WBOY
WBOY転載
2023-09-13 15:45:071012ブラウズ

HTML で同じクラス名の異なる要素に CSS スタイルを適用するにはどうすればよいですか?

HTML クラスは、本質的に大文字と小文字を区別するクラスのリストを指定するために HTML タグによって使用されるグローバル属性です。これらのクラスは、CSS によってそのクラスの特定のタグにスタイルを適用するために使用され、JavaScript によって HTML 要素の動作、対話性、またはスタイルを操作するために使用されます。

方法 1; ドット (.) セレクターを使用する

このアプローチでは、単純にドット (.) セレクターを使用して、同じクラス名を持つ複数の要素を選択し、CSS を使用してそれらに同じスタイルのセットを適用します。

###例###

この例では、クラスを使用して「p」タグと「span」HTML タグを選択し、CSS を使用してテキストの色「赤」を割り当てます。

リーリー

方法 2:「p」タグと「span」HTML タグを使用する

このアプローチでは、CSS を使用して、同じクラス名の要素に異なるスタイルのセットを適用します。これを行うには、HTML タグ名の後にドット (.) セレクターを使用して特定の要素を選択し、それに必要な CSS スタイルを与えます。

###例###

この例では、クラスを使用して「p」タグと「span」HTML タグを選択し、CSS を使用して異なるテキストの色を与えます。

リーリー ###結論は###

この記事では、クラス名から HTML 要素を選択する方法と、2 つの異なる方法を使用して同じおよび異なる CSS スタイルをそれらの要素に適用する方法について説明しました。最初の方法では、ドット (.) セレクターを使用して、同じクラス名を持つ複数の要素を選択し、それらに同じスタイルを適用します。 2 番目の方法では、HTML タグ名とそれに続くドット (.) セレクターを使用して、同じクラス名の要素に異なる CSS スタイルを適用します。

以上がHTML で同じクラス名の異なる要素に CSS スタイルを適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。