在css中使用正则表达式？

Question

我有一个 html 页面，其 div 的 id(s) 形式为 s1、s2 等。

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

我想将 css 属性应用于这些部分/div 的子集（取决于 id）。但是，每次我添加 div 时，我都必须像这样单独添加该部分的 css。

//css
#s1{
...
}

是否有类似 css 中的正则表达式之类的东西可以用来将样式应用于一组 div。

Answer 1

您可以在没有任何形式的正则表达式的情况下管理选择这些元素，如前面的答案所示，但要直接回答问题，是的，您可以在选择器中使用某种形式的正则表达式：

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

W3 CSS selector docs here.

Answer 2

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

匹配任何地方：.col-md、.left-col、.col、.tricolor 等

[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 文档中匹配项目的方法有很多种。从这个参考开始，查看一些可用的选择器/模式，您可以使用它们将样式规则应用于元素。

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

匹配所有divs，它们是#main的直系后代。

#main > div

匹配所有divs，它们是#main 的直接或间接后代。

#main div

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

#main > div:first-child

将div 与特定属性匹配。

#main > div[foo="bar"]

Answer 5

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

HTML：

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

CSS：

//css
.myclass
{
   ...
}

Answer 6

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

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

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

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

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