有没有一种文本过滤器或javascript/jquery函数可以在样式表中的所有CSS选择器前面添加某些内容?我正在尝试仅影响Twitter Bootstrap中的一个div,但它会影响到其外部的侧边栏,有没有办法解决这个问题?(我不想使用iframe。)
编辑:
我所需要做的就是能够在CSS文件的每个选择器前面添加ID“#content”。
编辑:
我所需要做的就是能够在CSS文件的每个选择器前面添加ID“#content”。
根据您在sabithpocker的回答下方的评论,我了解到您想要静态地修改CSS而不是动态地改变样式。我认为这最容易使用正则表达式实现:
查找:([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
替换为:$1#content $2
Regex详解
([,|\}][\s$]*)
- 查找前面样式中的 }
或 ,
,后面跟随空格(空格/制表符:\s
,换行符: $
)。闭合大括号或逗号可以防止正则表达式查找样式主体内部。[\.#]?
- 如果存在,则匹配样式名称中的起始 #
或 .
。-?[_a-zA-Z]+
- CSS样式名称可以以下划线或字母开头。此外,样式名称可以以破折号为前缀。[_a-zA-Z0-9-]*
- 匹配样式名称的剩余部分。这可以省略,但知道被修改的所有样式的样式名可能会很有用。$1#content $2
- 保留 }
(或 ,
)和空格原样不变 ($1
),然后插入您的文本 #content
(注意空格),随后是样式名称 ($2
)。我在Notepad++中测试过,它可以在我的样式表上正常工作。
需要注意的是,如果您的CSS没有压缩(并且跨行),您将需要支持多行正则表达式的编辑器(Notepad++支持)。
\}
只需要更改为 [,|\}]
) - RustyTheBoyRobota
标签)。 - David Sherretcss = css.replace(/(@media[^{]+{[\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/, "$1" + prependClass + " $2");
来捕获这些情况。 - David Sherret/regex/g
。 - RustyTheBoyRobotbackground: linear-gradient(to bottom, #ae9e9e, #454545);
。除了以字母开头的颜色外,使用 RGB 也无法正常工作。在所有情况下,都会出现类似于 background: linear-gradient(to bottom, #myDiv #ae9e9e, #454545)
的结果。有什么想法吗? - Mariano Martinez Peck([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
替换为: $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关于background: linear-gradient(to bottom, #ae9e9e, #454545);
的问题,以及@font-face
的问题。
?|
还是 ?:
? - ericpeters?|
是 PCRE 的东西,在 Java 中不支持。 - ericpeters".{} /*.table tbody > tr > td {font-family: verdana; font-size: small} */ .researchCompanyReportTableControls { display: none; } ".replace(/([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g, "$1" + "$2" + "#myDiv" + " $3");
但是它会因为无效组而失败。有什么想法吗?看起来似乎不喜欢?|
。 - Mariano Martinez Peck使用SCSS可以更轻松地完成这项任务。只需将现有的CSS嵌套到一个#my-new-selector { ... }中,然后通过一个SCSS to CSS编译器运行它(有在线工具可以做到这一点,无需安装任何软件)。
解决方法(如果确实需要这样做):
对于跨浏览器实现,可以使用下面展示的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);
不,样式表只是一个复制粘贴的文件。你必须用唯一标识符包装所有你想要的内容,然后使用这个唯一标识符引用它。
#content
。 - Ray