在CSS中使用正则表达式？

我有一个带有div的html页面，这些div具有形式为s1，s2等的id。

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

我想将css属性应用于这些部分/ div的子集（取决于id）。但是，每次添加div时，都必须像这样分别为该部分添加css。

//css
#s1{
...
}

css中是否存在诸如正则表达式之类的东西，可用于将样式应用于一组div。

您可以设法选择那些元素而无需任何形式的正则表达式，如前面的答案所示，但是要直接回答问题，可以在选择器中使用形式的正则表达式：

#sections div[id^='s'] {
    color: red;  
}

也就是说，请选择#section div中任何具有以字母“ s”开头的ID的div元素。

在这里看小提琴。

W3 CSS选择器文档在这里。

作为此答案的补充，您可以$用来获取结束匹配并*在值名称中的任何位置获取匹配。

匹配任何地方：.col-md，.left-col，.col，.tricolor，等。

[class*="col"]

比赛伊始：.col-md，.col-sm-6，等。

[class^="col-"]

匹配的结局：.left-col，.right-col，等。

[class$="-col"]

ID旨在唯一地标识元素。应用于它的任何样式也应该对该元素唯一。如果您有要应用于许多元素的样式，则应向所有元素添加一个类，而不要依赖ID选择器...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

和

.sec {
    ...
}

或者在您的特定情况下，可以选择父容器内的所有分区（如果其中没有其他内容），如下所示：

#sections > div {
    ...
}

首先，有很多方法可以匹配HTML文档中的项目。从此参考资料开始，可以查看一些可用的选择器/样式，您可以使用这些选择器/样式将样式规则应用于元素。

http://www.w3.org/TR/selectors/

匹配所有div是的直接后代的#main。

#main > div

匹配所有div是的直接或间接后代的#main。

#main div

匹配第一个div是的直接后代#sections。

#main > div:first-child

div与特定属性匹配。

#main > div[foo="bar"]

您可以仅向每个DIV添加一个类，然后通过以下方式将规则应用于该类：

HTML：

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS：

//css
.myclass
{
   ...
}

我通常*在要获取包含所需字符的所有字符串时使用。

* 在正则表达式中使用，替换所有字符。

在SASS或CSS中使用类似的东西[id*="s"]，它将获得所有ID为“ s ......”的DOM元素。

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

试试我的通用CSS正则表达式

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

演示https://regexr.com/4a22i

还有另一种简单的方法也可以在CSS中选择特定元素...

#s1, #s2, #s3 {
    // set css attributes here
}

如果您只有几个元素可以选择，并且不想打扰类，那么这也很容易工作。