在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。

您可能应该使用class属性来标识具有这些ID的元素的类

#1 楼

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

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

这表示选择#section div中具有ID以字母's'开头的所有div元素。

请参阅此处的小提琴。

此处是W3 CSS选择器文档。

这是针对CSS 2.1的建议； IE 7，Opera 9等支持它。来源：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

– Mike S
2014年6月10日20:38

你让我今天很开心。我希望在搜寻器中包含一些高级CSS选择器，以使其可用户配置。 ^ =就像沙漠中的水一样。

– DGoiko
19年6月25日在13:51

由此：developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors，它并不是真正的正则表达式，而是ID开头的纯匹配项。

–Erhannis
12月8日7:34

#2 楼

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

任意位置匹配：.col-md，.left-col，.col，.tricolor等。

[class*="col"]

开头的匹配项：.col-md，.col-sm-6等。

[class^="col-"]

末尾匹配：.left-col，.right-col，等

[class$="-col"]

（我知道这听起来很疯狂，但是）是否有可能在每场比赛中都进行“破坏”？

–沃尔特
6月1日1:29

#3 楼

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

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

和

.sec {
    ...
}

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

#sections > div {
    ...
}

#4 楼

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

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

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

#main > div

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

#main div

匹配第一个#main，它是div的直接后代。

#main > div:first-child

将#sections与特定属性。

#main > div[foo="bar"]

#5 楼

您可以仅将类添加到每个DIV，然后将规则以这种方式应用于该类：

HTML：

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

CSS：

//css
.myclass
{
   ...
}

同样作为一般规则，我尽量不要使用ID选择器来设置样式。它调整了特异性，因此它们很难被覆盖，这通常对我的经验造成的伤害更大。我使用id的...只是不适用CSS。

– prodigitalson
2012年1月17日23:55

我只是在说我要尽量避免使用id选择器，因为那样的话，如果以后再覆盖样式（让特定页面说），则最终必须使用相同的选择器+可以用来使它更多的其他东西比原始选择器更具体。如果只是.thepage #someid，还不错，但是在高级表或列表样式上它可能会花费很多时间。这并不是对您答案的批评，而是对您答案的一般建议：-)

– prodigitalson
2012年1月18日0:00

#6 楼

当我想获取包含所需字符的所有字符串时，通常使用*。正则表达式中使用的*替换所有字符。

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

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

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

#7 楼

请尝试我的通用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

#8 楼

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

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

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

@AustinHenley Bcoz这不是解决方案。我不想像问题中提到的那样每次都编辑CSS规则。

– Ankit
2012年11月7日14:52

这不应该被否决。例如，如果您知道最多有10个div，则可以将＃s1到＃s10，而不必触摸选择器。正确的方法是使用类，但是此解决方案采用您的假设并尝试解决方案。

– jcuenod
2015年4月3日在15:21

对于这种给定情况，这是否可行，并不重要。这个答案根本无法回答问题，因为任何具有最基本的CSS知识的人都知道如何使用多个选择器或类。

–贾安·巴瓦尔（Jayant Bhawal）
16年4月17日在9:58

编程黑洞网