在CSS中使用正则表达式？

Question

我有一个带有div的html页面，这些div的ID为s1，s2等形式。<div id="sections">   <div id="s1">...</div>   <div id="s2">...</div>   ...</div>我想将CSS属性应用于这些部分/ div的子集（取决于id）。但是，每次添加div时，都必须像这样分别为该部分添加css。//css#s1{...}css中是否有类似正则表达式的内容，可用于将样式应用于一组div。

Answer 1

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

#sections div[id^='s'] {

    color: red;  

}

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

Answer 2

您可以$用来获取最终匹配项，并*获取值名称中任何位置的匹配项。

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

[class*="col"]

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

[class^="col-"]

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

[class$="-col"]

Answer 3

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

<div id="sections">

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

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

   ...

</div>

和

.sec {

    ...

}

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

#sections > div {

    ...

}