更新

Question

我所有这些 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;
}

Answer 1

只需使用前缀属性选择器

即可

[id^="myid"] {

}

此选择器以具有前缀“myid”的ID属性的任何元素为目标 - 值周围的引号是可选的。这个选择器适用于IE7＆amp;以上也是。

Answer 2

是的，有办法

<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]

Answer 3

您可以使用begins with this attr selector。

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

DEMO

Answer 4

CSS3应该在这里提供帮助：

div[id^="myid"]

和

div[id^="test"]

Answer 5

我认为使用类会更好，因为增量ID会违反HTML和一般编程原则。你可以像这样重写它：

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

但是，如果必须保持id不变，则可以使用属性选择器：

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

Answer 6

在你的情况下，这样做：

[id=^"myid"] {
    //your rules
}

选择id属性以“myid”开头的所有元素。

但您不仅限于id属性。实际上，您可以使用任何其他html元素的属性。

假设您要选择所有＆lt; a＆gt; “href”属性以“http://stackoverflow.com”开头的标签。以下是这样做的：

a[href=^"http://stackoverflow.com"] {}

真的有很多选择。我没有自己指出它们，而是链接到w3页面，其中所有内容都是详细的：http://www.w3.org/TR/selectors/#attribute-selectors

Answer 7

除了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;
}

选择所有ID，唯一的区别是ID名称中的数字

7 个答案:

更新