CSS正则表达式选择器匹配一个或另一个条件？

Question

我想在/(\sclassName|^className)/满意时匹配,但在选择css时.假设我会使用:

[class(^|\s)='className'] {
  font-size: 5000px;
}

我找到了这个非常好的资源:CSS属性选择器上的Skinny,但它没有提到这个用例.

我只想在以下两个例子中匹配"icon-",而不是第三个.

在这里,这可以通过实现 [class^='icon-]

<div class='icon-something another-class'>

在这里,这可以通过实现[class~='icon-'],但是当'icon-'位于类字符串的最开头时,这不匹配:

<div class='another-class icon-something'>

我不想将它与字符串中间的-icon匹配.我相信*=会匹配这个,因为|=:

<div class='another-icon-class another-class'>

Answer 1

您需要使用具有相同规则的两个单独的选择器.CSS选择器并不真正支持交替.

[class^='icon-'], [class*=' icon-'] {
  /* ... */
}

div {
  color: red;
}

[class^='icon-'], [class*=' icon-'] {
  color: green;
}

<div class='icon-something another-class'>should match</div>
<div class='another-class icon-something'>should match</div>
<div class='another-icon-class another-class'>should not match</div>