有没有能力使用正则表达式来选择类？

Question

我知道有能力使用通配符选择页面中的元素,如https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

但我想在这样的类名中使用正则表达式

div.col-*-2-* {
  color: green;
}

<div class="col-1-1-1">Don't select</div>
<div class="col-1-2-1">Select</div>
<div class="col-3-2-3">Select</div>
<div class="col-4-2-1">Select</div>
<div class="col-5-3-2">Don't select</div>

Answer 1

你的问题很棒.但答案是否定的.

像你说的那样,没有关于css中正则表达式的用法.

对于您的解决方案,您可以这样使用:

[class*="col-1-2-"],[class*="col-2-2-"],[class*="col-3-2-"],[class*="col-4-2-"],[class*="col-5-2-"]{
  color: green;
}

<div class="col-1-1-1">Don't select</div>
<div class="col-1-2-1">Select</div>
<div class="col-3-2-3">Select</div>
<div class="col-4-2-1">Select</div>
<div class="col-5-3-2">Don't select</div>

根据您的评论,您可以这样使用:

[class="col-1-2-1"],[class="col-2-2-1"],
[class="col-3-2-1"],[class="col-4-2-1"],
[class="col-5-2-1"]{
      color: green;
    }

根据@RickHitchcock的答案,您可以像这样实现以满足您的要求:

[class^="col-"][class*="-2-"][class$="-1"]:not([class^="col-2"]) {
  color: green;
}

脚注:

作为@torazaburo,不要使用奇怪的构造类名,然后尝试做类似regexp的东西来解决它们.相反,使用允许直接处理元素的多个类.