html - 前缀 CSS 选择器

Question

如何轻松地为所有 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。 有没有其他方法可以实现这一目标？我想要这个是因为，当我将 Bootstrap css 插入我的页面时，我想避免冲突。

如果我编写代码来替换 '}' 和 '{' 之间的所有文本，并通过在新 ID 前加上前缀来替换中间的单词，会怎样？

Answer 1

如果您使用支持正则表达式查找和替换的文本编辑器，您可以这样做:

我正在使用 Notepad++

前缀所有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's

查找:((\.-?)(.*?)(?=\{))替换 #yourID \1 - 查找类(class)

查找:((\#-?)(.*?)(?=\{))替换 #yourID \1 - 查找 div

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

我想知道是否有人可以想出更好的方法来做到这一点。我发现元素选择器很困难，所以可能可以改进!

查找#yourID #yourID替换 #yourID - 替换可能的重复项