CSS3類匹配字母範圍[a-z] +？

是否有可能爲類「icon-」的任何元素創建CSS定義，然後是一組字母而不是數字。據this文章是這樣的：CSS3類匹配字母範圍[a-z] +？

[class^='/icon\-([a-zA-Z]+)/'] {}

應該作品。但由於某種原因，它沒有。

我特別需要像「圖標的用戶」，「圖標，OK」等，但不是「圖標-16」或「圖標-32」

所有元素創建樣式定義是否有可能在所有？

來源

2012-05-14 Radek Suski

該文章的第一行（強調添加）：「正則表達式匹配屬性選擇器。 *他們不存在*，但不會那麼酷嗎？「 –

您只能使用$ =，* =，^ =與字符串（不是正則表達式） – yAnTar

如果您不能這樣做，只需使用一個普通的通用類'圖標'：''。 – sp00m

CSS屬性選擇器不支持正則表達式。

如果你真的讀過那篇文章密切：

正則表達式匹配屬性選擇

他們不存在，但是那不是很爽？我不知道實施會有多困難，或者如何解析費用昂貴，但是它不會是炸彈嗎？

注意前三個單詞。 他們不存在。那篇文章不過是一篇博客文章，感嘆沒有在CSS屬性選擇器中支持正則表達式。

但是，如果你使用jQuery，James Padolsey's :regex selector for jQuery可能會讓你感興趣。你給出的CSS選擇器看起來像這樣的例子：

$(":regex(class, ^icon\-[a-zA-Z]+)")

來源

2012-05-14 09:25:18 BoltClock

大聲笑，這是當你正在尋找解決方案的小時，而你不再也看不懂了 T ）; –

我回答這一個在Facebook上，但想我應該最好份額也在這裏:)

我還沒有測試，所以不要拍如果它不起作用的話:)但我的猜測是明確地指向包含classname中單詞圖標的元素，但要指示瀏覽器不要包含那些包含數字的類。

示例代碼：

div[class|=icon]:not(.icon-16, .icon-32, icon-64, icon-96) {.....}

參考：

屬性選擇器...（http://www.w3.org/TR/CSS2/selector.html#attribute-selectors）： [ATT | = VAL]

表示與ATT屬性的元素，它的值要麼完全是「val」，要麼以「val」開頭，緊跟着「 - 」（U + 002D）。

：沒有選擇... （http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/）

希望這有助於

克瓦

來源

2012-05-14 15:41:44 Bulletproof

我測試了我先前的溶液中可以證實，這是行不通的（請參閱從BoltClock評論）。但是，這是：

OP：「特別是我需要爲所有元素創建樣式定義，如」icon-user「，」icon-ok「等，但不是」icon-16「或」icon-32「 「

所需的CSS代碼會是這個樣子：

/* target every element were the class name begins with (^=) "icon" but NOT those that begin with (^=) "icon-16", or "icon-32" */ 
*[class^="icon"]:not([class^="icon-16"]):not([class^="icon-32"]) {.....}

或

/* target every element were the class name begins with (^=) "icon" but NOT those that contain (*=) the number "16" or the number "18" */ 
*[class^="icon"]:not([class*="16"]):not([class*="32"]) { ...... }

測試代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      div{border:1px solid #999;margin-bottom:1em;height:100px;} 
      *[class|=icon]:not([class|=icon-16]):not([class|=icon-32]) {background:red;color:white;} 
     </style> 
    </head>  
    <body> 
     <div class="icon-something"> 
      <h4>icon-something</h4> 
      <p><strong>IS</strong> targeted therfore background colour will be red</p> 
     </div> 
     <div class="icon-anotherthing"> 
      <h4>icon-anotherthing</h4> 
      <p><strong>IS</strong> targeted therfore background colour will be red</p> 
     </div> 
     <div class="icon-16-install"> 
      <h4>icon-16-install</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
     <div class="icon-16-redirect"> 
      <h4>icon-16-redirect</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
     <div class="icon-16-login"> 
      <h4>icon-16-login</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
     <div class="icon-32-install"> 
      <h4>icon-32-install</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
     <div class="icon-32-redirect"> 
      <h4>icon-32-redirect</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
     <div class="icon-32-login"> 
      <h4>icon-32-login</h4> 
      <p>Is <strong>NOT</strong> targeted therfore no background colour</p> 
     </div> 
    </body> 
</html>

來源

2012-05-14 16:21:37 Bulletproof

在ie9，ff12，Chrome和Safari中測試=確認爲工作:) – Bulletproof

請參閱[我對該博客文章的評論]（http://kilianvalkhof.com/2008/css-xhtml/the-css3-not -selector /＃comment-164654）來理解爲什麼你原來的'：not（）'選擇器不工作，爲什麼你必須鏈接多個選擇器。 – BoltClock

CSS3類匹配字母範圍[a-z] +？

回答

正則表達式匹配屬性選擇

相關問題