Question

我正在自定义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生成代码，并希望使用regexp来设置这些元素的样式。我想实现以下目标：

- 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属性匹配，但由于它是动态的，我无法提前修复最后一个孩子
尝试使用范围内匹配范围，但我无法弄清楚如何检查数字是否在范围内
以及其他一些使用CSS

我认为我使用的CSS匹配条件是错误的，所以我想请求此论坛的专家向我展示如何正确使用$和范围：

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

我也对其他有助于保持主题动态的想法持开放态度。

提前致谢， Mithun Sridharan

Answer 1

CSS不知道regexp，但您可以使用~：

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

https://jsfiddle.net/auf56tgm/

Answer 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，因此可以简化标记。

如何使用CSS regexp匹配ID号

2 个答案: