在css中使用正则expression式?

我有一个div页面,其格式为s1s2等。

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

我想申请一个CSS属性的这些部分/ div(取决于id)的子集。 但是,每当我添加一个div ,我必须像这样分开添加CSS的部分。

 //css #s1{ ... } 

是否有像在CSS中的正则expression式,我可以用来将样式应用于一组div

你可以pipe理select那些没有任何forms的正则expression式的元素作为以前的答案显示,但直接回答这个问题,是的,你可以在select器中使用一种正则expression式:

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

这就是说,select任何div元素#sections div中有一个ID开头字母's'。

在这里看小提琴 。

W3 CSSselect器文档在这里 。

ID是为了唯一标识元素。 应用于该元素的任何样式也应该是该元素唯一的。 如果您想要应用于多个元素的样式,则应该为它们全部添加一个类,而不是依靠IDselect器…

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

 .sec { ... } 

或者在你的具体情况下,你可以select你的父容器中的所有分区,如果没有其他东西在里面,像这样:

 #sections > div { ... } 

首先,在HTML文档中有许多匹配项目的方法。 应该谨慎使用ID匹配。

首先从此引用开始,查看可用于将样式规则应用于元素的一些可用select器/模式。

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

大多数这些select器将与IE 9和所有其他现代浏览器一起工作; 重要的select器在IE 8中工作(结果将改变IE 7和更低)。

其次,除非你真的需要通过ID明确命名项目,否则考虑使用分层select器。 这使代码更清洁。

匹配#部分的直接后代的所有DIV

 #sections > DIV 

匹配#部分的直接或间接后代的所有DIV

 #sections DIV 

匹配#部分的直接后裔的第一个DIV

 #sections > DIV:first-child 

匹配具有特定属性的DIV

 #sections > DIV[foo="bar"] 

你可以'添加一个类到你的每个DIV,并以这种方式将这个规则应用到这个类中:

HTML:

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

CSS:

 //css .myclass { ... } 

还有另一个简单的方法来select特定的CSS元素也…

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

如果你只有几个元素可供select,而不想打扰课堂,这也可以很容易地工作。