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

只需使用前缀属性选择器

[id^="myid"] {

}

此选择器针对具有前缀“myid”的 ID 属性的任何元素 - 值周围的引号是可选的。此选择器也适用于 IE7 及更高版本。

于 2013-03-20T14:16:28.380 回答
2

您可以使用此 attr 选择器开头。

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

但是，如果您必须保持ids 原样，则可以使用属性选择器：

[id^=myid] {
    color: red;
}
于 2013-03-20T14:17:16.853 回答
1

在你的情况下，这会做到：

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

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

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

假设您要选择所有“href”属性以“ http://stackoverflow.com ”开头的 <a> 标签。以下将做到这一点：

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

真的有很多选择。我不会自己指出它们，而是链接到所有详细信息的 w3 页面：http: //www.w3.org/TR/selectors/#attribute-selectors

于 2013-03-20T14:31:13.493 回答
0

除了 ids 之外使用类（如果你真的需要 ids）：

<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 回答