javascript - 数字で終わる #id の一般的な CSS

Question

例から始めます

私はこのようなものを持っています。末尾の番号が異なる同じ ID 名。

#samplelist_1 { color: #fff; }
#samplelist_2 { color: #fff; }
#samplelist_3 { color: #fff; }
#samplelist_4 { color: #fff; }

これらのcssは自動的に生成されます。したがって、#samplelist_.. の css を宣言して定義したいと思います。これは、一般的にすべての #id に影響します。したがって、生成された #ids は、_15、_86、またはそのようなスタイルにすることができます。

それは可能ですか？

説明が理にかなっている場合は、私に知らせてください

前もって感謝します。ラフル TS

score 3 · Accepted Answer

属性の開始文字セレクターを使用できます。

[id^="samplelist_"] {
    color: white;
}

いっそのこと、彼らにクラスを与えてください。

score 3 · Accepted Answer

そのような冗長なスタイルを生成しないでください。代わりにクラスを使用して、同じスタイルを複数の要素に一度に適用してください。したがって、そもそもそのようなばかげたソリューションを探しに行く必要がなくなります。

クロスブラウザー互換の CSS を使用しない場合は、次のようなことができます

[id^="samplelist_"] {
    color: #FFF;
}

このセレクターについて詳しく説明しましょう

組み合わせると、「でid始まる場合samplelist_」と表示され、このスタイルを適用します。

2 に答える 2