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

WBOY
リリース: 2023-09-13 15:45:07
転載
1001 人が閲覧しました

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 までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート