Question

我有一个html页面，其div包含 s1 s ， s2 等 id ，等等。

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

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

//css
#s1{
...
}

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

Answer 1

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

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

这就是说#sections div中选择任何div元素，其ID以字母's'开头。

请参阅fiddle here。

W3 CSS selector docs here

Answer 2

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

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

和

.sec {
    ...
}

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

#sections > div {
    ...
}

Answer 3

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

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

[class*="col"]

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

[class^="col-"]

结尾处匹配：.left-col，.right-col等

[class$="-col"]

Answer 4

首先，有许多方法可以匹配HTML文档中的项目。应谨慎使用ID匹配。

首先从此引用开始，查看一些可用的选择器/模式，您可以使用它们将样式规则应用于元素。

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

这些选择器中的大多数都适用于IE 9和所有其他现代浏览器;重要的选择器在IE 8中工作（结果将因IE 7及更低版本而异）。

其次，除非您确实需要通过ID明确命名项目，否则请考虑使用层级选择器。这使代码更清晰。

匹配DIV的直接后代的所有#sections。

#sections > DIV

匹配DIV的直接或间接后代的所有#sections。

#sections DIV

匹配第一个DIV，它是#sections的直接后裔。

#sections > DIV:first-child

将DIV与特定属性匹配。

#sections > DIV[foo="bar"]

Answer 5

您只需向每个DIV添加一个类，并以这种方式将规则应用于该类：

HTML：

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

CSS：

//css
.myclass
{
   ...
}

Answer 6

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

Answer 7

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

正则表达式中使用的

*替换所有字符。

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

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

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

Answer 8

还有另一种在css中选择特定元素的简单方法......

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

如果您只有几个元素可供选择，并且不想打扰课程，这也很容易。

在css中使用正则表达式？

8 个答案: