我想知道是否有辦法像css文件中的正則表達式替換嗎?CSS和正則表達式(?)
例如:我有很多選擇的像這樣的:
#div_23
#div_45
#div_8
比方說,我不能使用的類來添加的造型,有沒有辦法做這樣的事情在CSS文件:
#div_[0-9] {background:#000000}
我想知道是否有辦法像css文件中的正則表達式替換嗎?CSS和正則表達式(?)
例如:我有很多選擇的像這樣的:
#div_23
#div_45
#div_8
比方說,我不能使用的類來添加的造型,有沒有辦法做這樣的事情在CSS文件:
#div_[0-9] {background:#000000}
可以部分匹配的屬性(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_
嘗試[id^=div_]
這應該有助於
[ID^= div_]會更正確。爲了澄清OP,這是一個屬性選擇器,所以它完全取代#div_部分。請參閱http://www.css3.info/preview/attribute-selectors/ – 2012-07-26 09:23:36
謝謝斯蒂芬:) – simoncereska 2012-07-26 09:25:15
好吧,但如何使用此:'#div_ [id^= div_] {}'或只是'[id^= div_] {}' – SomeoneS 2012-07-26 09:28:10
「不太支持」在這種情況下,沒有任何爭論:它在所有主流瀏覽器都支持(請參閱https://developer.mozilla.org/en/CSS/Attribute_selectors#Browser_compatibility)。我可否要求一位消息來源備份「'att^= val」'慢於'[att | = val]'「? – 2012-07-26 09:56:47
@RobW 1)主流瀏覽器 - 這是什麼? IE7,8或只有9,Firefox 13或3.5,... ??有些人仍然需要支持「舊」瀏覽器。 2)「可能」 - 這只是一個assupmtion,因爲它是一個更一般的表達 – Christoph 2012-07-26 10:01:29
我添加了[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