前缀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。是否有其他方法来实现这一目标？我希望这样做，因为当我将引导带css插入到我的页面中时，我希望避免冲突。

如果我编写代码来替换'}‘和'{’之间的所有文本，并以新id前缀替换中间的单词，该怎么办？？

Answer 1

如果使用支持regex查找和替换的文本编辑器，您可以这样做：

我用的是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

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

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

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

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

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

Answer 2

您可以使用scss自动为您的类添加前缀。

创建一个文件mystyle.scss

#styleOnlyInsideMe {
    /*Your entire css*/
    .myClass {
      /*your styles*/
    }
}

然后在命令提示符/终端中运行

node-sass mystyle.scss mystyle.css

这样，您所有的css都将以#styleOnlyInsideMe作为前缀。

您可以在这里了解节点-sass。

https://www.npmjs.com/package/node-sass