如何解析並提取CSS選擇器爲字符串？

將css選擇器提取爲字符串的最簡單方法是什麼？如何解析並提取CSS選擇器爲字符串？

鑑於此輸入：

#article{width:690px;overflow:hidden} 
#article h2:first-child a{text-decoration:none} 
#works .project p:last-child{margin-top:20px;font-size:13px} 
#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}

我怎樣才能選擇列表像這樣：

var selectors = ['#article','#article h2:first-child a','#works .project p:last-child','#works .project img']

來源

2011-11-28 kht

[CSS語法/ abstracter的可能重複？如何將樣式錶轉換爲對象]（http://stackoverflow.com/questions/2226869/css-parser-abstracter-how-to-convert-stylesheet-into-object） –

[使用Javascript RegExp匹配CSS選擇器]（http://stackoverflow.com/questions/5481749/matching-css-selectors-with-a-javascript-regexp） – BoltClock

這裏是我結束了與解決方案：

更換花括號包括其與一些獨特的文字內容。正則表達式從這裏拿起Matching CSS Selectors with a Javascript RegExp
將這個列表拆分爲這些獨特的字符。

只是想在這裏發佈的機制的文檔：

var css = "#article[type=x]{width:690px;overflow:hidden}#article h2:first-child a{text-decoration:none}#works .project p:last-child{margin-top:20px;font-size:13px}#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}" 
var found = css.replace(/{([^}]*)}/gm,"~~~").split("~~~"); 

document.write(found);

來源

2011-12-02 19:44:09 kht

定義「輸入如果這是在一個已經解析由瀏覽器樣式表。，您可以使用DOM Level 2 Style API來提取樣式表中的CSS規則並查詢它們以供選擇器使用（儘管您可能必須自行進行逗號分割）。

I f它不會被瀏覽器解析，而是通過其他機制作爲輸入提供，您可以使用JSCSSP（JavaScript中的CSS解析器）來解析輸入。

來源

2011-11-28 21:20:26

它是用戶提供的一串CSS。 – kht

@kht：那麼這聽起來像JSCSSP可能是你想要的解決方案。 –

也許，看起來似乎過度，雖然只是提取CSS選擇器？ – kht

警告：Waporcode，我沒有測試過這一點，但我用這樣的事情之前....

document.styleSheets[0].cssRules[0].selectorText

這就是你想要的？

來源

2011-11-28 21:20:30

IE做不同。 *嘆*請參閱：http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html –

CSS將是用戶輸入，所以CSS基本上是一個需要解析的字符串。 – kht

如何解析並提取CSS選擇器爲字符串？

回答

相關問題