我构建了一个 HTML5 工具,该工具以前位于独立页面上。客户希望将其包含在他们的页面中,但担心 CSS 冲突。
我想把我的工具放在一个包装器 div 中,类为“customtool”,然后在每个 CSS 选择器前面加上 .customtool 我有很多样式表,选择器的总数很高。我知道手动修改选择器存在人为错误的风险。
显然我不能简单地定位“.”或 '#' 因为它不适用于像 .wrapper .content.customclass #div
这样的选择器
在这种情况下,我想
.customtool .wrapper .content.customclass #div
但替换 '.'使用“.customtool”。和 '#' 与 '.customtool #' 将给出 .customtool .wrapper .customtool .content.customtool。自定义类.customtool #div
您将如何制作一个自动化程序来在每条规则前面添加选择器?
最佳答案
http://www.css-prefix.com/工具似乎不喜欢注释,它会在注释后将所需的前缀注入(inject) 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/ .这将以红色突出显示这些错误注入(inject)的类,以便于发现并删除它们。
关于css - 自动 'namespacing' CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37206639/