在css中使用正则表达式？

Question

我有一个带有div的html页面,其id为s1,s2等形式.

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

我想将css属性应用于这些section/div的子集(取决于id).但是,每次添加div时,我都必须像这样单独添加css.

//css
#s1{
...
}

有什么像css中的正则表达式,我可以用来将样式应用于一组div.

Answer 1

您可以管理选择那些没有任何形式的正则表达式的元素,如前面的答案所示,但要直接回答问题,是的,您可以在选择器中使用正则表达式:

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

这表示在#sections div中选择任何div元素,其ID以字母's'开头.

请看这里的小提琴.

这里有W3 CSS选择器文档.

Answer 2

作为这个答案的补充,您可以使用它$来获得最终匹配并*获得中间匹配.

匹配所有.col-md,.left-col,.col等.

[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 {
    ...
}

Answer 4

首先,有许多方法可以匹配HTML文档中的项目.应谨慎使用ID匹配.

首先从此参考开始,查看一些可用的选择器/模式,您可以使用这些选择器/模式将样式规则应用于元素.

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

大多数这些选择器将与IE 9和所有其他现代浏览器一起使用; 重要的选择器在IE 8中工作(结果将因IE 7及更低版本而异).

其次,除非您确实需要通过ID明确命名项目,否则请考虑使用层级选择器.这使代码更清晰.

匹配所有div直接后代的s #main.

#main > div

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

#main div

匹配第div一个直接后代#sections.

#main > div:first-child

将a div与特定属性匹配.

#main > div[foo="bar"]

Answer 5

您可以为每个 DIV 添加一个类，并以这种方式将规则应用于该类：

HTML：

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

CSS：

//css
.myclass
{
   ...
}