5

これらのすべてのdiv には、最後に異なる番号が付いているという事実を除いて、同じ ID名が付いています。

クラスを使用できることはわかっていますが、それは ID でなければなりません。

    <div id="myid1">text</div>
    <div id="myid2">text</div>
    <div id="myid3">text</div>
    <div id="myid4">text</div>

   <div id="test1">text</div>
   <div id="test2">text</div>

私の質問は、css を使用して、これよりも短いものをすべて選択するにはどうすればよいかということです。

#myid1,#myid2,#myid3,#myid4{
    color:red;
}

この種のものは存在しますか? もしそうなら、どのように書きますか?

myid1[*]{
    color:red;
}
4

7 に答える 7

15

Just use the prefix attribute selector

[id^="myid"] {

}

This selector targets any element with an ID attribute that has the prefix "myid" - quotes around the value are optional. This selector works in IE7 & above as well.

于 2013-03-20T14:16:28.380 に答える
2

この attr selector で開始して使用できます。

[id^=myid] {
    color:red;
}

デモ

于 2013-03-20T14:16:36.373 に答える
2

CSS3 はここで役立つはずです:

div[id^="myid"]

と

div[id^="test"]
于 2013-03-20T14:17:35.533 に答える
1

はい、方法があります

<div id="myid1" class="foo">text</div>
<div id="myid2" class="foo">text</div>
<div id="myid3" class="foo">text</div>
<div id="myid4" class="foo">text</div>

<div id="test1">text</div>
<div id="test2">text</div>

とcss

.foo { color:red; }

アップデート

それらがIDでなければならない場合は、試してみてください[id^=myid]

于 2013-03-20T14:16:08.003 に答える
1

増分 ID は HTML や一般的なプログラミングの原則に反するため、クラスを使用する方がはるかにうまくいくと思います。次のように書き換えることができます。

<div class="myid" data-id="1">text</div>
<div class="myid" data-id="2">text</div>

ただし、をそのままにしておく必要idがある場合は、属性セレクターを使用できます。

[id^=myid] {
    color: red;
}
于 2013-03-20T14:17:16.853 に答える
0

IDに加えてクラスを使用します（本当にIDが必要な場合）：

<div class="mytext" id="myid1">text</div>
<div class="mytext" id="myid2">text</div>
<div class="mytext" id="myid3">text</div>
<div class="mytext" id="myid4">text</div>

<div id="test1">text</div>
<div id="test2">text</div>

次に、CSS は単純です。

div.mytext {
    color: red;
}
于 2013-03-20T14:18:40.207 に答える