CSS regex选择器匹配一个OR另一个条件？ [英] CSS regex selector match one OR another condition?

问题描述

当 /（\sclassName | ^ className）/ 满足时，但是当选择css时，我想匹配。假设我会使用像：

  [class（^ | \s）='className'] {
 font -size：5000px; 
} 
  

我找到这个资源，这是非常好的： http://css-tricks.com/attribute-selectors/ ，但它没有提到这个use- case：

我只想在以下2个示例中匹配icon-，但不是第3个。

在这里，这可以通过 [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'> 
  

解决方案

您需要使用两个单独的选择器相同规则。 CSS选择器不支持替换。

  [class ^ ='icon-']，[class * ='icon- '] {
 / * ... * / 
} 
  
 
 
 
 
 
 < pre class =snippet-code-css lang-css prettyprint-override>  div {color：red;} [class ^ ='icon-']，[class * ='icon-'] { color：green;}  

 < div class = -something another-class'>应该匹配< / div>< div class ='another-icon-something'>应该匹配< / div> >不应与< / div>  

匹配

I'd like to match when /(\sclassName|^className)/ is satisfied, but when selecting css. Hypothetically I would use like:

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

I've found this resource, which is very nice: http://css-tricks.com/attribute-selectors/, but it doesn't mention this use-case:

I just want to match "icon-" in the following 2 examples, but not the 3rd.

Here, this can be achieved with [class^='icon-]

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

Here, this can be achieved with [class~='icon-'], but this does not match when 'icon-' is at the very beginning of the class string:

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

I do not want to match this, with -icon in the middle of a string. I believe *= will match this one, as will |= :

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

解决方案

You'll need to use two separate selectors with the same rule. CSS selectors don't really support alternation.

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

这篇关于CSS regex选择器匹配一个OR另一个条件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！