我们有一个喜欢插入内联样式的CMS，我写了一些删除内联样式的代码添加了一个类并将样式属性的内容重写到头部的样式标签中。
示例 HTML
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<p style="width: 50%;">Blah blah blah</p>
<p style="font-weight: bold;">Even more blah blah blah</p>
<p>Can I get some blah blah blah</p>
<p>Ooo Ahh blah blah blah</p>
</div>
</body>
</html>
jQuery 函数
$.each($('#container [style]'), function(index, el){
var cssText = el.style.cssText;
var className = "auto-class-" + index;
$(el).removeAttr("style");
$(el).addClass(className);
$("<style type='text/css'> ." + className + "{" + cssText + "} </style>").appendTo("head");
})
期望的结果 HTML
<html>
<head>
<title>Title</title>
<style type="text/css"> .auto-class-1 { width: 50%; } </style>
<style type="text/css"> .auto-class-2 { font-weight: bold; } </style>
</head>
<body>
<div id="container">
<p class="auto-class-1">Blah blah blah</p>
<p class="auto-class-2">Even more blah blah blah</p>
<p>Can I get some blah blah blah</p>
<p>Ooo Ahh blah blah blah</p>
</div>
</body>
</html>
我在所有优秀的浏览器中都按预期工作，但在 IE6 中，jQuery [style] 选择器似乎捕获了 #container 中的所有元素。所以你会得到以下内容。
IE6 中的结果 HTML
<html>
<head>
<title>Title</title>
<style type="text/css"> .auto-class-1 { width: 50%; } </style>
<style type="text/css"> .auto-class-2 { font-weight: bold; } </style>
<style type="text/css"> .auto-class-3 { } </style>
<style type="text/css"> .auto-class-4 { } </style>
</head>
<body>
<div id="container">
<p class="auto-class-1">Blah blah blah</p>
<p class="auto-class-2">Even more blah blah blah</p>
<p class="auto-class-3">Can I get some blah blah blah</p>
<p class="auto-class-4">Ooo Ahh blah blah blah</p>
</div>
</body>
</html>
在上面的示例中，这不会导致任何问题，但在我们的网站上，任何给定页面上都有超过 300 个 DOM 节点，这会造成困惑。
问题是如何在 IE6 中只选择具有样式属性的 DOM 节点。
还有一种简单的方法可以将所有规则写入一个样式标签，而不是为每个规则使用单独的样式标签。
最佳答案
这不是对您提出的具体问题的回答，但我认为您应该这样做。
你在评论中说:
It's for print style sheets. The inline styles over overrule them, but style tags are fine.
您使用的解决方案(将内联样式移动到 <style> 元素)不是很优雅。
你最好加上 !important打印样式表中的每一个声明。
body {
color: #444 !important;
padding: 0 !important;
margin: 0 !important;
}
#menu {
display: none !important;
}
是的，这很丑陋，但它比基于 JavaScript 的解决方案要干净得多。
如果您想了解一些背景信息:
参见: http://css-tricks.com/specifics-on-css-specificity/
The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.
关于jquery - 如何使用 jQuery 在 IE6 中选择带有样式标签的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5962034/