如何让 CSS 选择特定模式的 ID？ [复制]答案

【问题标题】：How to get CSS to select ID of specific pattern? [duplicate]如何让 CSS 选择特定模式的 ID？ [复制]
【发布时间】：2016-09-13 02:52:27
【问题描述】：

html 页面包含 div ID s like q1r1, q1r2, q1r3,q2r1,q2r2,q2r3,.... 如何在 CSS 中选择这些 ID 以一次应用样式？如果 ID 只是 q1,q2, q3..，则可以使用 id^="q"。

【问题讨论】：

为什么不能为每个类应用一个通用的类名？
[id^="q"] 是否选择所有这些，还是我不明白你想要什么？
html是通过一些复杂的python脚本自动生成的。
[id^="q"] 也会选择不被选择的带有 "qrst" 的 id。
您需要用逗号分隔：[id^="q1"], [id^="q2"]。如果所有的“q#”标签都有一个包含元素，你也可以使用它：.container [id^="q"].

标签： css

【解决方案1】：

你可以做[id^q]：

JS Fiddle

[id^=q] {
  // common styles
}

如果你想省略某个id，你可以使用[id^=q]:not(#idname)：

JS Fiddle

或者，如果您想排除以某种模式开头的 id，请将两者结合起来：

JS Fiddle

/* All ids that start with "q" but not "qr" */
[id^=q]:not([id^=qr]) { 
  // Styles here
}

但我绝对建议添加一个通用类，因为这是它们的设计目的。如果可以通过python添加id，我认为也可以添加一个类。

【讨论】：

谢谢....几乎是一个解决方案...
有什么问题？

【解决方案2】：

通过使用 '^' 选择器可以应用样式

<!DOCTYPE html>
<html>
<head>
<style>
div[id^="q"] {
    background: #ffff00;
}
</style>
</head>
<body>

<div id="q1r1">The first div element.</div>
<div id="q1r2">The second div element.</div>
<div id="q2r2">The third div element.</div>
<p id="q2r1">This is some text in a paragraph.</p>

</body>
</html>

【讨论】：