Question

我已经构建了一个HTML5工具，它曾经是一个独立的页面。客户希望将其包含在他们的页面中，但是担心CSS冲突。

我想把我的工具放在一个包装div中，用一个类'customtool'，然后在每个CSS选择器前加上.customtool我有很多样式表，选择器的总数很高。通过手动修改选择器，我意识到人为错误的风险。

显然我不能简单地瞄准'。'或'＃'，因为它不适用于像.wrapper .content.customclass #div这样的选择器在这种情况下，我想

.customtool .wrapper .content.customclass #div 但取代'。'用'.customtool。' '＃'与'.customtool＃'会给.customtool .wrapper .customtool .content.customtool. customclass .customtool #div

您如何制定自动程序以在每条规则前添加选择器？

Answer 1

http://www.css-prefix.com/工具似乎不喜欢评论，它会在评论后向CSS注入所需的前缀，无论遵循什么，在某些情况下会留下一些像这样的CSS：

.customtool #div-id #header {
    width: 100%;
    height: 45px;
    /* 60px;*/

    .customtool
    /* 68 originally */

    .customtool margin-top: 15px;
    /*margin-top: 35px; */

    .customtool
    /*margin-top: 20px; */

    .customtool
    /* to make it visible in the iPad browser */

    .customtool
}

对此的一个相当简单的解决方法是通过诸如http://www.cleancss.com/css-beautify/之类的Beautifier运行它。这将突出显示这些错误注入的红色类，使其易于发现并删除它们。

Answer 2

一个不完全自动化的简单解决方案是在Sublime文本中使用find和replace。每个选择器（除了第一个）都跟随前一个。因此，您可以使用'} .customtool'找到并替换'}'。

但是为了便于阅读，您可以在每个选择器之间添加一条新线。在Sublime Text中，在查找和替换窗格中按返回运行查找，而不是在查找和替换窗格中添加换行符。但是，您可以在记事本（或其他纯文本编辑器）中键入以下内容：

}
[add empty line here - cannot be shown in stackoverflow]

然后将其复制并粘贴到查找窗口中。然后在记事本中键入以下内容：

}

.customtool

然后将其粘贴到Sublime的“替换”窗口中。我建议使用'replace'来逐步完成更改而不是'替换所有'，因为某种原因Sublime似乎没有检测到每一个}并且可能存在你没有在结束括号后添加空格的情况。注释将在查找和替换中被选中后停止第一个选择器，因此请密切注意这些

接下来通过查找,并替换为, .customtool来处理选择器之间的逗号 - 足够简单。

最后，您需要手动修改第一个选择器。

使用“查找和替换”来部分自动化在每个选择器之前添加新类的过程，应该可以节省您的时间和精力。然而，如上所述，它不能完美地工作并且需要手动检查。

如果有人编写了一个完成此任务的工具来解析CSS表并完全自动化该过程，那将会非常有用。但是我不知道有任何这样的工具。

Answer 3

您可以使用此automatic prefixer，但它似乎无法很好地处理您的选择器之间的空格。

自动'命名空间'CSS

3 个答案: