CSS は複数のクラスに基づいて要素を同時にスタイル設定できますか?

CSS は複数のクラスに基づいて要素をスタイル設定できますか?

複数のクラスに基づいて要素を選択すると、複雑なページ レイアウトのスタイルを設定するのに役立ちます。 JavaScript を使用せずに、間にスペースを入れずに CSS セレクターを連結することでこれを実現できます。

たとえば、.left クラスと .ui-class-selector クラスの両方を持つ li タグにスタイル ルールを適用するには:

li.left.ui-class-selector {
    /* style here */
}

この CSS ルールは、.left クラスと .ui-class-selector クラスの両方を持つ要素にのみ一致し、スタイルを設定します。

より複雑な CSS セレクターの別の例を次に示します。

div.container .item.active.hovered {
    /* style here */
}

このルールは、次の要素を持つ要素のみに一致し、スタイルを設定します。クラス:

• .container
• .item
• .active
• .hovered

の順序に注意してくださいセレクター内のクラスが重要です。このルールは、指定された順序でクラスが適用されている要素のみに一致します。

以上がCSS は複数のクラスに基づいて要素を同時にスタイル設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。