在 CSS 中 ID 末尾带有奇数/偶数的目标 div

Question

我有一个标识的div div1，div2，div3，等。

我想分别针对所有 div 和 ID 以奇数/偶数结尾（在 CSS 中）。

<div id="div1"></div>
<div id="div2"></div>
<!-- Other html here -->
<div id="div3"></div>
<div id="div4"></div>

HTML 会定期更改，因此可以避免每次都更改 CSS。

div 不是连续的，这就是为什么我没有使用nth-child(even/odd). 如果可能，我想避免向 div 添加任何新属性。

这是使用 CSS 中的表达式的类似问题的链接。

我想在 CSS 中实现这样的东西

'#div' + 'even'

我可以使用数据属性吗？例如data-target="1"，data-target="2"等等。

Answer 1

这需要多个选择器。

例如，要选择奇数编号的 ID，请使用正则表达式符号$, 来表示字符串的结尾。

div[id$="1"],
div[id$="3"],
div[id$="5"],
div[id$="7"],
div[id$="9"] {}

div[id$="1"],
div[id$="3"],
div[id$="5"],
div[id$="7"],
div[id$="9"] {}

div[id$="1"],
div[id$="3"],
div[id$="5"],
div[id$="7"],
div[id$="9"] {
  color:red;
}