Question

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

但我想在类名这样的

中使用正则表达式

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

在css中没有关于正则表达式的用法，就像你说的那样。

对于您的解决方案，您可以这样使用：

＆＃13;

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

＆＃13;

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

＆＃13;

根据您的评论，您可以这样使用：

[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的东西来解决它们。相反，请使用允许直接处理元素的多个类。

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

1 个答案: