2012-07-26 71 views
3

我想知道是否有辦法像css文件中的正則表達式替換嗎?CSS和正則表達式(?)

例如:我有很多選擇的像這樣的:

#div_23 
#div_45 
#div_8 

比方說,我不能使用的類來添加的造型,有沒有辦法做這樣的事情在CSS文件:

#div_[0-9] {background:#000000} 

回答

5

可以部分匹配的屬性(css2.1 doc/css3 doc) - 但請注意,這些規則相當緩慢。特別是在你的情況下,你必須使用超慢屬性選擇器來匹配使用#時會快速閃爍的ID。

我喜歡用連字符連接的ID和班級,我發現他們更具可讀性和這種方式,您可以使用下面的匹配:

[att|=val] 

適用於您的情況:

#div-23 
#div-45 
#div-8 
#div 

都會匹配

[id|=div]{background:#000000} 

但是,CSS3提供ES以下屬性選擇器(這是在所有主要的瀏覽器都支持),這將滿足完美你的情況:

[att^=val] 

,所以你可以寫:

[id^=div_]{background:#000000} 

匹配

#div_23 
#div_45 
#div_8 
/* and */ 
#div_ 
+0

「不太支持」在這種情況下,沒有任何爭論:它在所有主流瀏覽器都支持(請參閱https://developer.mozilla.org/en/CSS/Attribute_selectors#Browser_compatibility)。我可否要求一位消息來源備份「'att^= val」'慢於'[att | = val]'「? – 2012-07-26 09:56:47

+0

@RobW 1)主流瀏覽器 - 這是什麼? IE7,8或只有9,Firefox 13或3.5,... ??有些人仍然需要支持「舊」瀏覽器。 2)「可能」 - 這只是一個assupmtion,因爲它是一個更一般的表達 – Christoph 2012-07-26 10:01:29

+0

我添加了[link](https://developer.mozilla.org/en/CSS/Attribute_selectors#Browser_compatibility)出於某種原因... IE7 + ,FF 1+(儘管現在仍然普遍使用3.6,但很少有用戶使用Firefox 3.5)。 '[att^= val]'不是** RegEx,它是一個子字符串匹配(一個正則表達式必須先被解析,一個查看索引零的子字符串不是很昂貴)。 – 2012-07-26 10:04:42

4

嘗試[id^=div_]這應該有助於

+3

[ID^= div_]會更正確。爲了澄清OP,這是一個屬性選擇器,所以它完全取代#div_部分。請參閱http://www.css3.info/preview/attribute-selectors/ – 2012-07-26 09:23:36

+0

謝謝斯蒂芬:) – simoncereska 2012-07-26 09:25:15

+1

好吧,但如何使用此:'#div_ [id^= div_] {}'或只是'[id^= div_] {}' – SomeoneS 2012-07-26 09:28:10