如何在 CSS 中使用正则表达式？

我有一个带有 div 的 html 页面，其中的 id格式为 s1一、 s2等等。



...


...

...

我想对这些节/div 的子集应用 css 属性(取决于 id)。但是，每次我添加一个 Div，我必须为这个部分分别添加 css，如下所示。

//css
#s1{
...
}

在 css 中是否有类似于正则表达式的东西，我可以使用它来将样式应用于一组 Div。

205880 次浏览
小开

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

Http://www.w3.org/tr/selectors/

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

#main > div

匹配所有作为 #main的直接或间接后代的 div。

#main div

匹配第一个 div，它是 #sections的直系后代。

#main > div:first-child

将 div与特定属性匹配。

#main > div[foo="bar"]
小开

你不能只是给你的每个 DIV 添加一个类，然后用这种方式把规则应用到这个类:

HTML:

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

CSS:

//css
.myclass
{
...
}
小开

ID 用于标识元素 独一无二。应用于它的任何样式对于该元素也应该是唯一的。如果您有要应用于 很多元素的样式，那么您应该向它们全部添加一个类，而不是依赖于 ID 选择器..。

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

还有

.sec {
...
}

或者在您的特定情况下，您可以选择父容器中的所有部分(如果没有其他部分在其中) ，如下所示:

#sections > div {
...
}
小开
最佳答案

正如前面的答案所示，你可以不使用任何形式的正则表达式来选择这些元素，但是为了直接回答这个问题，是的，你可以在选择器中使用一种形式的正则表达式:

#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>

这意味着在 # 部分 div 中选择任何 ID 以字母‘ s’开头的 div 元素。

参见 在这里拉小提琴。

W3 CSS 选择器文档在这里 。

小开

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

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

[class*="col"]

开始时匹配: .col-md、 .col-sm-6等。

[class^="col-"]

结尾处匹配: .left-col、 .right-col等。

[class$="-col"]
小开

当我想获得包含所需字符的所有字符串时，我通常使用 *。

*用于正则表达式，替换所有字符。

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

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


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

提交答案