前置所有 CSS 选择器

Question

是否有一个文本过滤器或 javascript/jquery 函数可以在样式表中的所有 css 选择器前面加上一些东西？我试图用 twitter bootstrap 只影响一个 div，但它正在影响它之外的侧边栏，有没有办法做到这一点？ （我不想使用 iframe。）

编辑：

我想要的只是能够为 css 文件中的每个选择器添加一个 ID“#content”。

Answer 1

您在 sabithpocker 的回答下的评论告诉我，您希望静态修改 CSS，而不是动态更改样式。我认为使用正则表达式最简单：

查找：([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
替换为：$1#content $2

正则表达式分解

• ([,|\}][\s$]*) - 从前面的样式中查找} 或,，后跟空格（空格/制表符：\s，换行符：$）。右大括号\逗号可防止正则表达式查看样式内部。
• [\.#]? - 匹配样式名称中的起始 # 或 .（如果存在）。
• -?[_a-zA-Z]+ - CSS 样式名称可以以下划线或字母开头。此外，样式名称可以在前面加上破折号。
• [_a-zA-Z0-9-]* - 匹配样式名称的其余部分。这可以省略，但最好知道所有已修改样式的样式名称。
• $1#content $2 - }（或,）和空格保留原样（$1）。其后是您插入的文本#content（注意空格），然后是样式名称（$2）。

我在 Notepad++ 中对此进行了测试，它适用于我的样式表。
需要注意的是，如果你的 CSS 没有被压缩（并且是多行的）， 您将需要支持多行正则表达式的编辑器（Notepad++ 支持）。

Answer 2

改进了 RustyTheBoyRobot 和 BoltClock♦ 答案以允许 cmets 和媒体查询。

查找：([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)

替换为：$1$2 #content $3

编辑

我注意到我提供的代码仅适用于 PHP。

这是一个改进的版本，应该可以在 Javascript 和 PHP 中运行

正则表达式模式*

(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)

完整示例*

var outputString = inputString.replace(
    /(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)/g,
    "$1$2 #content $3"
);

这也应该解决@Mariano Martinez Peck 与background: linear-gradient(to bottom, #ae9e9e, #454545); 的问题和@font-face 的问题

Answer 3

使用 SCSS 可以更轻松地完成此操作。只需使用您现有的 CSS，使用 #my-new-selector { ... } 将其全部嵌套，然后通过 SCSS 到 CSS 编译器运行它（有在线工具可以做到这一点，而无需安装任何东西。

Answer 4

一种解决方法（如果您真的需要这样做）：

1. 等待窗口加载并应用所有样式
2. 获取您希望应用的样式保持不变的元素
3. 获取他们的样式并内联应用它

对于跨浏览器实现，您可以使用如下所示的 jquery 插件：

$('#mydiv *').each(function(){
    $(this).css($(this).getStyleObject());
    });

然后禁用原来的样式表

document.stylesheets[n].disabled = true;
//or use this : $('link[title=mystyle]')[0].disabled=true;

//n should be index of style sheet -- counts external + internal style sheets

插件：

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

Answer 5

不，样式表只是一个复制粘贴文件。你必须用唯一标识符包装你想要的所有东西，然后使用这个唯一标识符引用它。