複数の CSS クラスを単一の HTML 要素に適用するにはどうすればよいですか?

複数の CSS クラスを単一の要素に適用する

HTML では、class 属性を使用して、要素をスタイル設定するための CSS クラスを指定できます。ただし、同じクラス属性内で複数のクラスを割り当てると、適用されるクラスが 1 つだけになるという問題がよく発生します。

問題:

複数のクラスを 1 つのクラスに適用する以下に示すように、個別のクラス属性を使用する単一の要素は、常に期待どおりに動作するとは限りません:

<code class="html"><a class="c1" class="c2">aa</a></code>

回答:

複数の CSS を適用するには 2 つの方法がありますクラスを単一の要素に効果的に結合します:

方法 1: クラス属性内の複数のクラス

クラス属性内でクラス名を空白で区切ります:

<code class="html"><a class="c1 c2">aa</a></code>

このメソッドは、両方のクラスを要素に同時に割り当てます。

メソッド 2: 複数のクラスの CSS セレクター

指定されたすべてのクラスを含む要素をターゲットにするには、次を使用します次の CSS セレクターは、クラス名の間に スペースなし:

<code class="css">.c1.c2 {
    /* CSS properties */
}</code>

このセレクターは、「c1」クラスと「c2」クラスの両方が適用されている要素をチェックします。

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