CSS ワイルドカードは一意の識別子を持つ動的クラスのスタイル設定を合理化できますか?

動的クラス スタイリングのための CSS ワイルドカードの利用

HTML 要素のスタイル設定では、プライマリ クラスと並んで一意の識別子が使用されることがよくあります。提供されたシナリオでは、複数の div がクラス「tocolor」を使用してスタイル設定されていますが、それぞれに「tocolor-1」、「tocolor-2」などの追加の一意の識別子が必要です。

質問CSS セレクターでワイルドカード () を使用してこれを効率化する方法はありますか? ".tocolor-" を使用した最初の試みでは結果が得られませんでした。

解決策は属性セレクターを活用することです。属性セレクターを使用すると、クラスなどの属性に基づいて要素をターゲットにすることができます。この場合、次のセレクターで目的の効果が得られます。

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red;
}

「[class^="tocolor-"]」セレクターは、クラス属性が「tocolor-」で始まる要素をターゲットにします。 [class*=" tocolor-"]" セレクターは、クラス属性にスペース文字に続く部分文字列 "tocolor-" が含まれる要素をターゲットとします。

セレクター:

• "[class^="tocolor-"]": 「tocolor-1」、「tocolor-」など、「tocolor-」で始まるクラス属性を持つ要素と一致します。 2、など。
• "[class*=" tocolor-"]": 部分文字列「tocolor-」を含むクラス属性を持つ要素を即座に照合します。 「tocolor-1」、「test tocolor-2」などのように、スペース文字が前に続きます。

これらの属性セレクターを利用すると、目的のスタイルを複数の要素に適用できます。単一のクラス セレクターを使用して、さまざまな一意の識別子を使用します。これにより、CSS コードが簡素化され、保守性が向上します。

以上がCSS ワイルドカードは一意の識別子を持つ動的クラスのスタイル設定を合理化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。