预先添加所有CSS选择器

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"
);

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