匹配字符串

我正在尋找在CSS的方式來選擇具有一類字符串的開頭匹配任何元素開始任何CSS類。我知道的[*類=「字符串」]和[^類=「字符串」]的規則，但這些不正是我要找的。^=只匹配第一個類，所以任何前面的類都會破壞它。 * *查找字符串的任何部分，而不僅僅是開頭。匹配字符串

http://codepen.io/anon/pen/HiJjL

HTML: 

<div class="asdf col-6">match</div> 
<div class="col-6">match</div> 
<div class="x-col-6">dont match</div> 

CSS: 

[class *= "col-"] { 
    color:red; 
} 
[class ^= "col-"] { 
    font-weight:bold; 
}

筆能說明問題。第一個選擇器太寬，第二個太窄。當然，我可以解決此通過使用* =和小心與我的其他類的名字，但我很好奇，如果這是可能的。

來源

2014-09-24 bluncker

看那upvoted回答爲[該SO問題]（http://stackoverflow.com/questions/13352080/match-all-class-selectors-that-begin-with）。我認爲這可能適用於你的問題。 – Icemanind 2014-09-24 22:36:54

@icemanind，你是對的。我用一個選擇喜歡這個div [^類=「同事」]，DIV [*類=「同事」] – bluncker 2014-09-24 22:47:35

CSS

span[id^='string_'] {}

HTML

<span id="string_example">string example</span>

來源

2014-09-24 22:35:26 John

這真的沒有回答這個問題的。 – bluncker 2014-09-26 15:59:10

答案符合的問題，問題是類格式不正確。清理類名，你會得到它的工作。 – John 2014-09-26 20:45:43

我不知道過這種可能性，但我也認爲這是不正確的做法。更好的解決方案是將多個類添加到元素。

<div class="asdf col col-6">match</div> 
<div class="col col-6">match</div> 
<div class="x-col-6">dont match</div>

這樣，你可以知道div是'col'（column？），更具體地說，它是'col-6'。

來源

2014-09-24 22:35:34 GolezTrol

回答

相關問題