0

如何轻松地为所有 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 加上前缀来替换它们之间的单词怎么办？

4

2 回答 2

2

如果您使用支持正则表达式查找和替换的文本编辑器，您可以执行以下操作：

我正在使用记事本++

前缀全部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;
}

编辑

我最接近自动化的是以下情况：

跑

Find: ((\.-?)(.*?)(?=\,))Replace #yourID \1- 查找逗号分隔的类

查找：((\#-?)(.*?)(?=\,))替换#yourID \1- 查找逗号分隔的 id

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

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

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

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

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

于 2013-10-11T10:09:25.597 回答
0

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

创建一个文件mystyle.scss

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

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

node-sass mystyle.scss mystyle.css

这样你所有的css都将以#styleOnlyInsideMe

你可以在这里了解 node-sass

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

于 2018-04-26T18:22:00.277 回答