CSS匹配選擇

Question

當我想匹配特定類my-class-b還具有另一個類my-other-class-a同一元件上我能做到

.my-class-b.my-other-class-a { 
} 

此外，當欲通過部分類名我匹配可以使用

[class^="my-class-"] { 
} 

現在我想混合兩者，但它似乎並沒有工作。我該怎麼辦

[class^="my-class-"].my-other-class-a { 
} 

Answer 1

這不完全防彈的，但只要你的「變量」級是第一位的，這可以工作：

div[class^='my-class'][class~='my-other-class-a'] { 
 
    background-color: red; 
 
}

<div class="my-class-a my-other-class-a">Hello</div> 
 
<div class="my-class-b my-other-class-a">World</div> 
 
<div class="my-other-class-a">Bye</div>

Answer 2

出現這種情況因爲class屬性是從css選擇器[class^="abc"]中的指定類開始測試的。

如果選擇是

[class^="my-"] 

然後

class="my-class red" 

是不一樣的

class="red my-class" 

瞧瞧吧http://jsfiddle.net/u5sfge94/

一種方法解決此我s來指定一個充當[class^=「abc」]的新類。它可能會讓你的樣式表更加有組織，你的代碼更清晰，並且CSS會更快地呈現出來。

Answer 3

在之前的回答中@juank的解釋是正確的：您寫下類的順序很重要，因爲^代表價值的開始。

但也有使用正則表達式許多其他的屬性選擇符號：^=，*=，特別$=; RESP。從任何地方開始，並以匹配結束。
如果您希望您的選擇器與包含my-class的類匹配，則應使用*=（請參閱片段1）。
但是，它也會匹配任何不以my-class開頭的類，但仍包含它。爲避免這種情況，您可以像以前一樣匹配^=，也可以匹配[class*=" my-class"]（帶空格）：它將考慮它不是第一類寫入類屬性值的情況（請參閱摘錄2）。

資源：CSS3 Substring Matching Attribute Selectors at CSS3。信息（鏈接到REC CSS 3級選擇器在最後）

片段1：

[class*='my-class'].my-other-class-a { 
 
    background-color: lightgreen; 
 
}

<div class="my-class-a my-other-class-a">Should match 1</div> 
 
<div class="my-class-b my-other-class-a">Should match 2</div> 
 
<div class="my-other-class-a">Nope</div> 
 
<div class="my-other-class-a my-class-a">Should match 3</div> 
 
<div class="my-other-class-a my-class-b">Should match 4</div> 
 
<div class="whatever my-other-class-a my-class-a">Should match 5</div> 
 
<div class="other my-other-class-a my-class-b">Should match 6</div> 
 
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>

片段2：

[class^='my-class'].my-other-class-a, 
 
[class*=' my-class'].my-other-class-a { 
 
    background-color: lightgreen; 
 
}

<div class="my-class-a my-other-class-a">Should match 1</div> 
 
<div class="my-class-b my-other-class-a">Should match 2</div> 
 
<div class="my-other-class-a">Nope</div> 
 
<div class="my-other-class-a my-class-a">Should match 3</div> 
 
<div class="my-other-class-a my-class-b">Should match 4</div> 
 
<div class="whatever my-other-class-a my-class-a">Should match 5</div> 
 
<div class="other my-other-class-a my-class-b">Should match 6</div> 
 
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>