15

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

编辑：

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

4

5 回答 5

28

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

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

正则表达式的细分

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

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

于 2012-06-22T18:59:26.247 回答
7

改进了 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"
);

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

于 2016-06-08T06:50:45.043 回答
4

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

于 2017-05-22T22:58:50.653 回答
1

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

  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);
于 2012-06-22T18:14:28.267 回答
0

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

于 2012-06-22T17:55:13.440 回答