如何在 CSS 中选择多个 id？答案

【问题标题】：How to select multiple ids in CSS?如何在 CSS 中选择多个 id？
【发布时间】：2017-09-24 16:37:49
【问题描述】：

如何在 CSS 中选择多个 ID？例如：

#test_id_*{

}

<div id="test_id_10"></div>
<div id="test_id_11"></div>

【问题讨论】：

ID 是通过 jquery 生成的还是只是页面上不同的静态 id？
How to get CSS to select ID that begins with a string (not in Javascript)?的可能重复

标签： css

【解决方案1】：

使用attribute selector 在id 属性上：

[id^='test_id_'] { color: red; }

说明：

[attr^=value]表示属性名为attr的元素，其第一个值以“value”为前缀。

【讨论】：

【解决方案2】：

要将一个css 用于多个id 或class，您需要用, 分隔它们

#test_id_10,
#test_id_11
{
    //some style
}

【讨论】：

【解决方案3】：

如果你想为多个div添加相同的样式，最好使用class，但如果你有自己的原因，更好的方法是将你所有的div包装在一个div上：

<div class="wrap">
  <div id="id1">
    <p>
      First Div!
    </p>
  </div>
  <div id="id2">
     <p>
        Second Div!
     </p>
   </div>
  <div id="id3">
    <p>
      Third Div!
    </p>
  </div>
</div>

并在你的 CSS 中设置你的样式：

.wrap > div {
  color:blue;
 }

【讨论】：

这仅适用于继承的属性。

【解决方案4】：

如果他们有相同的风格，那为什么他们不能有相同的类？

.iknow{
  width: 50px;
  height:50px;
  background-color: aqua;
  border: 1px solid red;
  display: inline-block;
}

<div id="test_id_10" class="iknow"></div>
<div id="test_id_11" class="iknow"></div>
<div id="test_id_12" class="iknow"></div>
<div id="test_id_13" class="iknow"></div>
<div id="test_id_14" class="iknow"></div>
<div id="test_id_15" class="iknow"></div>
<div id="test_id_16" class="iknow"></div>
<div id="test_id_17" class="iknow"></div>
<div id="test_id_18" class="iknow"></div>
<div id="test_id_19" class="iknow"></div>
<div id="test_id_20" class="iknow"></div>
<div id="test_id_21" class="iknow"></div>

【讨论】：

【解决方案5】：

你必须像下面这样通过它

#test_id_10,#test_id_11{

}

【讨论】：

不，这不会针对其他 ID 进行扩展

【解决方案6】：

您可以用逗号分隔它们以将 css 应用于多个 id。

<div id="test_id_10"></div>
<div id="test_id_11"></div>

您可以通过以下方式选择它们：

#test_id_10, #test_id_11 {
// your css values
}

【讨论】：

如何将其扩展到 100 个 ID 为 test_id_nnn 形式的元素？
如果你想对所有元素应用相同的css，你可以使用class。但是如果你想使用多个 id，你可以使用 jquery 来选择具有相同模式的多个 id。 $(function() { $("input[id^='test_id_']").test_id_({ // 你的css }); });
为什么有人会引入 jQuery 来应用样式？为什么不为此使用纯 CSS？

【解决方案7】：

#test_id_10 { //your styling }

这里是W3学校的基础知识https://www.w3schools.com/cssref/sel_id.asp

【讨论】：

OP 想知道如何为以test_id_ 开头的多个 ID 编写规则。