修改

Question

是否有文本过滤器或javascript / jquery函数，它会在样式表中添加所有css选择器？我试图用twitter bootstrap影响一个div，但是它影响了它之外的侧边栏，无论如何要做到这一点？（我不想使用iframe。）

编辑：

我想要的是，能够为ID文件中的每个选择器添加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♦回答允许评论和媒体查询。

查找：([,|\}][\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"
);

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

Answer 3

使用SCSS可以更轻松地完成此操作。只需使用现有的CSS，使用＃my-new-selector {...}将其嵌套，然后通过SCSS到CSS编译器运行（有在线工具可以执行此操作而无需安装任何内容。

Answer 4

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

等到窗口加载并应用所有样式
抓住您想要应用的样式完整的元素
获取他们的样式并将其应用于内联

对于跨浏览器实现，您可以使用下面显示的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

没有样式表只是一个复制粘贴文件。您必须使用唯一标识符包装所需的所有内容，然后使用此唯一标识符引用它。

预先添加所有CSS选择器

5 个答案:

修改