CSS を使用して単一の HTML 要素で複数のクラスのスタイルを設定するにはどうすればよいですか?

単一要素での複数のクラスのスタイル設定

CSS を使用する場合、特定のスタイル効果を実現するために HTML 要素に複数のクラスを適用する必要が生じる場合があります。ただし、HTML を使用して複数のクラスを割り当てると混乱が生じ、不正確な結果が生じる可能性があります。

あなたの場合、最初のソーシャル アイコンから上部のパディングを削除し、最後のソーシャル アイコンから下部の境界線を削除することを目的としていました。この問題は、同じソーシャル div に 2 つの別個のクラスを直接追加しようとした HTML マークアップから発生しました。

正しい HTML マークアップ:

複数のクラスを適切に使用するには

<div class="social first"></div>

対応する CSS:

.social.first {
  padding-top: 0;
}

この構文を使用すると、.social と.first クラスは HTML の div 要素に適用され、両方のスタイル要件をターゲットにすることができます。

デモの例:

/* Base styling for both social icons */
.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

/* Styling for the first social icon */
.social.first {
  padding-top: 0;
}

/* Styling for the last social icon */
.social.last {
  border: none;
}

このコードは正常に動作します。最初のソーシャル アイコンの上部にゼロ パディングを適用し、最後のソーシャル アイコンから下の境界線を削除して、必要なスタイル要件を満たします。

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