在css中使用正则表达式？
在css中使用正则表达式？
提问于 2012-01-18 07:48:39
我有一个带有div的html页面，其中包含s1，s2等形式的id(s)。
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>我想将css属性应用于这些sections/div的子集(取决于id)。但是，每次我添加一个css div时，我都必须像这样单独添加该部分的。
//css
#s1{
...
}在css中有没有类似正则表达式的东西，可以用来将样式应用于一组div。
回答 7
Stack Overflow用户
回答已采纳
发布于 2012-01-18 08:06:39
正如前面的答案所示，您可以在不使用任何形式的正则表达式的情况下选择这些元素，但是要直接回答问题，可以在选择器中使用一种形式的正则表达式：
#sections div[id^='s'] {
color: red;
}<div id="sections">
<div id="s1">one</div>
<div id="s2">two</div>
<div id="s3">three</div>
<div id="t1">four</div>
</div>
也就是说，选择#sections div中ID以字母's‘开头的所有div元素。
参见fiddle here。
Stack Overflow用户
发布于 2018-04-12 02:56:55
作为this answer的补充，您可以使用$获取结束匹配，使用*获取值名称中任何位置的匹配。
匹配任何位置：.col-md、.left-col、.col、.tricolor等。
[class*="col"]开头匹配：.col-md、.col-sm-6等。
[class^="col-"]结尾的匹配项：.left-col、.right-col等。
[class$="-col"]Stack Overflow用户
发布于 2012-01-18 07:52:39
ID用于唯一地标识元素。应用于它的任何样式对于该元素也应该是唯一的。如果您有想要应用于许多元素的样式，则应该向所有元素添加一个类，而不是依赖ID选择器……
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>和
.sec {
...
}或者，在您的特定情况下，您可以选择父容器中的所有分段，如果没有其他内容，如下所示：
#sections > div {
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8903313
复制相关文章
相似问题