CSS 在css中使用正则表达式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8903313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using regular expression in css?
提问by Ankit
I have an html page with divs that have id(s) of the form s1, s2and so on.
我有一个带有 div 的 html 页面，这些 div 具有s1、s2等形式的id(s) 。
<div id="sections">
<div id="s1">...</div>
<div id="s2">...</div>
...
</div>
I want to apply a css property to a subset of these sections/divs (depending upon the id). However, every time I add a div, I have to add the css for the section separately like this.
我想将 css 属性应用于这些部分/div 的子集（取决于 id）。但是，每次添加div 时，我都必须像这样分别为该部分添加 css。
//css
#s1{
...
}
Is there something like regular expressions in css that I can use to apply style to a set of divs.
是否有像 css 中的正则表达式之类的东西，我可以用它来将样式应用于一组divs。
回答by steveax
You can manage selecting those elements without any form of regex as the previous answers show, but to answer the question directly, yes you can use a form of regex in selectors:
您可以管理选择那些没有任何形式的正则表达式的元素，如前面的答案所示，但要直接回答问题，是的，您可以在选择器中使用一种形式的正则表达式：
#sections div[id^='s'] {
color: red;
}
That says select any div elements inside the #sections div that have an ID starting with the letter 's'.
也就是说，选择 #sections div 中 ID 以字母“s”开头的任何 div 元素。
See fiddle here.
请参阅此处的小提琴。
回答by uruapanmexicansong
As complement of this answeryou can use $to get the end matches and *to get matches anywhere in the value name.
作为此答案的补充，您可以使用$来获取最终匹配项并*获取值名称中任何位置的匹配项。
Matches anywhere: .col-md, .left-col, .col, .tricolor, etc.
匹配任何地方：.col-md，.left-col，.col，.tricolor，等。
[class*="col"]
Matches at the beginning: .col-md, .col-sm-6, etc.
比赛伊始：.col-md，.col-sm-6，等。
[class^="col-"]
Matches at the ending: .left-col, .right-col, etc.
匹配的结局：.left-col，.right-col，等。
[class$="-col"]
回答by animuson
An ID is meant to identify the element uniquely. Any styles applied to it should also be unique to that element. If you have styles you want to apply to manyelements, you should add a class to them all, rather than relying on ID selectors...
ID 用于唯一标识元素。应用于它的任何样式也应该是该元素独有的。如果您有要应用于许多元素的样式，则应该为所有元素添加一个类，而不是依赖 ID 选择器...
<div id="sections">
<div id="s1" class="sec">...</div>
<div id="s2" class="sec">...</div>
...
</div>
and
和
.sec {
...
}
Or in your specific case you could select all divisions inside your parent container, if nothing else is inside it, like so:
或者在您的特定情况下，您可以选择父容器内的所有分区，如果其中没有其他内容，如下所示：
#sections > div {
...
}
回答by Tim Medora
First of all, there are many, many ways of matching items within a HTML document. Start with this reference to see some of the available selectors/patterns which you can use to apply a style rule to an element(s).
首先，有很多很多方法可以匹配 HTML 文档中的项目。从此参考开始，查看一些可用的选择器/模式，您可以使用这些选择器/模式将样式规则应用于元素。
http://www.w3.org/TR/selectors/
http://www.w3.org/TR/selectors/
Match all divs which are direct descendants of #main.
匹配所有divs 的直接后代#main。
#main > div
Match all divs which are direct or indirect descendants of #main.
匹配所有divs 的直接或间接后代#main。
#main div
Match the first divwhich is a direct descendant of #sections.
匹配第一个div是 的直接后代#sections。
#main > div:first-child
Match a divwith a specific attribute.
将 adiv与特定属性匹配。
#main > div[foo="bar"]
回答by Aurelio De Rosa
You can' just add a class to each of your DIVs and apply the rule to the class in this way:
您可以只为每个 DIV 添加一个类，然后以这种方式将规则应用于该类：
HTML:
HTML：
<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>
CSS:
CSS：
//css
.myclass
{
...
}
回答by Niko9
I usually use *when I want to get all the strings that contain the wanted characters.
我通常*在想要获取包含所需字符的所有字符串时使用。
*used in regex, replaces all characters.
*在正则表达式中使用，替换所有字符。
Used in SASS or CSS would be something like [id*="s"]and it will get all DOM elements with id "s......".
在 SASS 或 CSS 中使用将类似于[id*="s"]它会获取所有 id 为“s......”的 DOM 元素。
/* add red color to all div with id s .... elements */
div[id^="s"] {
color: red;
}
回答by Max Halochkin
Try my generic CSS regular expression
试试我的通用 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}(?=.*-))
回答by Sandeep S
there is another simple way to select particular elements in css too...
还有另一种简单的方法来选择 css 中的特定元素......
#s1, #s2, #s3 {
// set css attributes here
}
if you only have a few elements to choose from, and dont want to bother with classes, this will work easily too.
如果您只有几个元素可供选择，并且不想打扰类，那么这也很容易。
