html - 前缀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中的div。
是否有其他方法可以实现这一目标？我想要这样做是因为我想避免在将引导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-替换可能的重复项