Javascript 前置所有CSS选择器

是否有一个文本过滤器或javascript/jquery函数可以在样式表中的所有css选择器前面加上一个某物？我试着用twitter引导来影响一个div，但是它影响了它之外的边栏，有没有这样做的方法？（我不想使用iframe。）

编辑：

---

我所希望的就是能够为css文件中的每个选择器预先添加一个ID“#content”。

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

解决方法（如果您确实需要这样做）：

等待窗口加载并应用所有样式

抓取希望应用的样式完好无损的元素

获取他们的样式并将其内联应用

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

/*
*jQuery JavaScript库的getStyleObject插件
*发件人：http://upshots.org/?p=112
*/
（函数（$）{
$.fn.getStyleObject=函数（）{
var dom=this.get（0）；
var风格；
var返回={}；
if（window.getComputedStyle）{
var camelize=函数（a，b）{
返回b.toUpperCase（）；
};
style=window.getComputedStyle（dom，null）；
for（变量i=0，l=style.length；i

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

查找：

（[，|\}][\s$]*）（[\.\35;]？-？[\ u a-zA-Z]+[\u a-zA-Z0-9-]*）

替换为：

$1#内容$2

正则表达式的细分

• （[，| \}][\s$]*）

  -查找前一样式中的

  }

  或

  ，

  ，后跟空格（空格/制表符：

  \s

  ，换行符：

  $

  ）。右大括号\逗号防止正则表达式查看样式的主体内部

• [\.\\\\\\\\\\\\\\\\\\\\\\\\\\\\/code>匹配样式名称中的起始
  或
  （如果存在）
  -？[\u a-zA-Z]+
  -CSS样式名称可以以下划线或字母开头。此外，样式名称可以在前面加一个破折号
  [\u a-zA-Z0-9-]*
  -与样式名称的其余部分匹配。这可以省略，但最好知道所有修改过的样式的样式名称
  $1#content$2
  -将
  }
  （或
  ，
  ）和空白保留在找到它的方式中（
  $1
  ）。它后面是插入的文本
  #content
  （注意空格），然后是样式名称（
  $2
  ）
  

我在Notepad++中测试了它，它可以在我的样式表上运行。
需要注意的是，如果您的CSS没有被压缩（并且是多行的），

---

您需要支持多行正则表达式的编辑器（Notepad++有）。

改进了RustyTheBoyRobot和BoltClock♦ 回答以允许评论和媒体查询

查找：

（[，[124\}][\ s$]*）（（？\124\/\/.[\ s$]+[124\/.*.*.\/\*.\/[\ s$]*.@media.*.[[\s$]*.]*）（[\.\s$].-？[\u a-zA-Z]+[\u a-zA-Z0-9-]*）

替换为：

$1$2#内容$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"
);

完整示例*

(^(?:\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的

背景问题：线性渐变（到底，#ae9e9e，#454545）

和

@font-face

这可以通过使用SCSS更容易地完成。只需使用现有的CSS，用#我的新选择器{…}将其嵌套，然后通过SCSS运行到CSS编译器（有一些在线工具可以做到这一点，而无需你安装任何东西。

Hmmmm…你为什么不找到一种唯一识别div的方法呢？改变页面的所有样式似乎是一个坏主意，因为它可能会破坏其他东西。你不太同意@nico。发布你的网站或小提琴，肯定有更好的方法不会打破页面，我想将twitter引导css应用于单个div，我只想在bootstrap.css文件中预加css。我有一个唯一的标识符，问题是所有css都不匹配，我需要一种方法来处理文本，并将

#内容

预加到每个选择器。css以文本形式出现，然后在浏览器中保留为文本在document.stylesheets数组中的对象，现代浏览器有直接攻击它们的方法。看看兼容性和可用功能的怪癖@sabithpocker我知道CSS是如何工作的，我想为特定于CSS格式的文本文件设置一个文本过滤器，使用该过滤器我想为该文本文件中的所有选择器添加一个前缀。有什么新的吗可以导出它以便保存.css文件吗？我希望这是一个静态文件。你需要什么，你能解释一下你到底想实现什么吗？我想应用twitter引导css（bootstrap.css）对于单个div，当前它正在影响页面上的所有内容。谢谢！！它得到了大部分内容，但它留下了一些类似的内容：

\content音频、画布、视频{display:inline block；*display:inline；*zoom:1；}

它没有得到画布或视频。@Raymond-更新为包含逗号分隔的名称。（

\}