html - 在 CSS 的 ID 末尾使用奇数/偶数定位 div

Question

我有 ID 为 div1、div2、div3 等的 div。

我想定位所有 ID 分别以奇数/偶数结尾的 div(在 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 添加任何新属性。

这是 a link使用 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"] {
  color:red;
}

<div id="div1">Odd</div>
<div id="div2">Even</div>
<div id="div3">Odd</div>
<div id="div4">Even</div>
<div id="div99999">Odd</div>
<div id="div2000">Even</div>
<div id="div333">Odd</div>
<div id="div377">Odd</div>