一些選擇不爲我

我寫了一些選擇工作，但它並沒有爲我工作。一些選擇不爲我

HTML代碼：

<h2 rel="singer-connector-cricketer">Shoaib Chikate</h2> 
<h2 rel="dancer-build-tester">Ashok Dongare</h2>

CSS代碼：

h2[rel|="connector"]{ 
    color:blue; 
}

CSS Tricks Attribute

類似地，另一：火柴（）選擇也沒有工作，儘管我使用的是高Chrome版本（版本32.0.1700.77）。

HTML代碼：

<div id="matcher"> 
     <p>Matched</p> 
     <h1>Not</h1> 
     <h2>Matched</h2> 
     <h3>Not</h3> 
</div>

CSS代碼：

#matcher :matches(p,h2){ 
    color:purple; 
}

這怎麼選擇是否行得通呢？

CSS tricks Selectors- :matches()

JSFIDDLE

來源

2014-04-14 Shoaib Chikate

什麼是您使用的Chrome的確切版本？請不要只說「更高版本」。如果你使用加納利，那麼這麼說吧。 – BoltClock

我更新了我的問題。 –

h2[rel|="connector"]尋找一個屬性值，該值開始與「連接器」後跟一個連字符。它不查找具有單詞「連接器」一組連字符連接字之間的任意位置的屬性值 - 值必須開始與給定的字符串。

由於給出的兩個元素分別具有rel屬性，其值分別以「歌手 - 」和「舞者 - 」開頭，因此它們都不匹配。

我不知道，它支持:matches()但鍍鉻的任何版本。最新的穩定版本（34.x撰寫本文時）不還支持:-webkit-any()，但是。

當然，不用說，你不應該使用:-webkit-any()並在生產代碼前綴的其餘部分，因爲CSS錯誤處理規則意味着使用它在當前的前綴狀態實際上使你有寫每個前綴的重複規則完全違背其預期目的。例如，請參閱this answer。您可以測試所有你想要的這些新的選擇，但是有很少試圖使用他們生產的同時，對他們的支持依然不佳獲得。

來源

2014-04-14 11:56:26 BoltClock

以'^ ='開頭。 '| ='是包含在屬性 – fcalderan

@Fabrizio Calderan一句話：沒有，'| ='有一個「開始，以」限購爲好。請參閱http://www.w3.org/TR/CSS21/selector.html#matching-attrs和http：//www.w3。org/TR/css3-selectors /＃attribute-representation – BoltClock

哦，你是絕對正確的「* ...或者以」val「開始...... *」我從來沒有注意到這種行爲。這就是爲什麼我喜歡這樣，總是有一些新的東西需要學習。 – fcalderan

我會嘗試使用#matcher :-moz-any(p,h2)和#matcher :-webkit-any(p,h2)而不是:matches因爲目前只有少數瀏覽器支持:matches。

請參閱：http://jsfiddle.net/CUvZ8/2/

來源

2014-04-14 12:00:07 Julian

但另一個選擇器h2 [rel * =「connector」]不是解決方案，因爲我的問題是爲什麼我使用它的選擇器不工作。 –

一些選擇不爲我

回答

相關問題