如何将 ID 号与 CSS regexp 匹配答案

【问题标题】：How match ID number with CSS regexp如何将 ID 号与 CSS regexp 匹配
【发布时间】：2015-05-15 22:41:34
【问题描述】：

我正在自定义一个 Wordpress 主题，但遇到以下 CSS 问题。我有一个元素列表如下：

li.block1, li.block2, li.block3, li.block4 {  top: 0; }
li.block5, li.block6, li.block7, li.block8 {  top: 150px; }
li.block9, li.block10, li.block11, li.block12 {  top: 300px; }

我正在使用 PHP 生成代码，并希望使用正则表达式来设置这些元素的样式。我想实现以下目标：

- li.block[1-4] {style 1}
- li.block[5-9] {style 2}
- li.block[10-14] {style 3}
- and so on...

由于我根据用户输入动态生成li.block[number]，这可能会涉及数百个元素，我相信使用正则表达式是正确的方法。

我尝试了以下方法：

尝试使用 $ 匹配最后一个元素，但我需要一些关于如何匹配一系列值的帮助
尝试使用 last-child 属性匹配，但由于它是动态的，我无法提前修复 last-child
尝试使用in-range来匹配范围，但不知道如何检查数字是否在范围内
以及其他几个使用 CSS 的 DOM 匹配条件

我认为我使用的CSS匹配条件是错误的，所以我想请这个论坛的专家教我如何正确使用$和range：

如何使用基于：li.block[number,i, in range a-b] {Apply style number, i} 的正则表达式？

我也乐于接受其他有助于我保持主题动态的想法。

提前致谢，米通斯里达兰

【问题讨论】：

标签： php css regex wordpress stylesheet

【解决方案1】：

CSS 不懂正则表达式，但你可以使用~:

li {top: 0;}
li.block4 ~ li {top: 150px;}
li.block8 ~ li {top: 300px;}

https://jsfiddle.net/auf56tgm/

【讨论】：

嘿@panther，那 (~) 叫什么？ +1 好答案
@ʰᵈˑ：（通用）兄弟选择器

【解决方案2】：

另一种方法是链接 :nth-child 伪类，例如

示例：https://jsfiddle.net/pg0c3qq3/2/

   li:nth-child(-n + 4) { top: 0 }
   li:nth-child(n+5):nth-child(-n + 8) { top: 150px; }
   li:nth-child(n+9):nth-child(-n + 12) {  top: 300px; }

与一般的同级解决方案相比，现在每个规则都仅将样式定义为li 元素的预期范围，因此，使用此方法，每个规则实际上都不会恢复从以前的规则。

此外，这不需要对每个列表项应用特定的class，因此可以简化标记。

【讨论】：