前綴CSS選擇器

如何容易地爲所有CSS選擇器加前綴？前綴CSS選擇器

在我的CSS文件中，我有很多類，但我不希望將這些樣式應用於整個HTML，而是應用於特定的div。

例如，

//In css file 
.myClass{ 
//Some Styling 
} 

//In HTML 

<div class=myClass></div> 
<div id="styleOnlyInsideMe"> 
<div class=myClass></div> 
</div>

如果我能與ID

#styleOnlyInsideMe .myClass{ 
    //Some Styling 
    }

前綴我選擇的myClass樣式將僅適用於內#styleOnlyInsideMe覈實。有沒有一種替代方法來實現這一目標？我想要這樣做是因爲，當我將引導css插入到我的頁面時，我想避免衝突。

如果我編寫代碼來替換'}'和'{'之間的所有文本，並通過爲新的ID添加前綴來替換其中的單詞會怎樣？

來源

2013-10-11 Subin Jacob

我覺得查找和替換即將來臨？找到：'.myClass'替換：'#styleOnlyInsideMe .myClass'應該這樣做:-) - 大多數文本編輯器會爲你做這件事 –

我不明白如果'id'是你正在尋找其他解決方案的問題解決問題 – BeNdErR

@DannyHearnah但.myClass只是一個例子。我想重命名整個css文件。它可能包含具有不同名稱的其他選擇器。有時候ID選擇器，類選擇器標記選擇器等 –

如果您使用文本編輯器，將支持正則表達式找到&代替你可以做這樣的事情：

我用記事本+ +

前綴的所有classes 查找：(\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{) 替換：#yourID \1

前綴全部IDs查找：(\#-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{) 替換：#yourID \1

前：

.p_container { 
    position:fixed; 
    z-index:2; 
    display:none; 
} 

.step { 
    background-repeat:no-repeat; 
    background-position:center; 
}

後：

#yourID .p_container { 
    position:fixed; 
    z-index:2; 
    display:none; 
} 

#yourID .step { 
    background-repeat:no-repeat; 
    background-position:center; 
}

編輯

我能得到的最接近的自動化是以下情況：

運行

查找：((\.-?)(.*?)(?=\,))更換#yourID \1 - 找到逗號分隔類

查找：((\#-?)(.*?)(?=\,))更換#yourID \1 - 找到逗號分隔的ID

查找：((\.-?)(.*?)(?=\{))更換#yourID \1 - 查找類

查找：((\#-?)(.*?)(?=\{))更換#yourID \1 - 找到的div

查找(\n[_a-zA-Z]+[_a-zA-Z0-9-])(.*?)(?=\{)替換#yourID \1 - 查找元素選擇器

我想知道是否有人可以制定一個更好的方式來做到這一點..元素選擇器我發現很難，所以可能可以改進！

查找#yourID #yourID替換#yourID - 替換可能重複

來源

2013-10-11 10:09:25

'.className1 .className2 {}'？ –

看我的編輯 - 這應該適合你 –

前綴CSS選擇器

回答

相關問題