Javascript Firefox - css 规则对象不返回样式表中的 id 选择器样式

Question

我的样式表中有 3 个样式规则 block 。 1个ID选择器 2个类选择器

从 CSSStyleSheet 查询 cssRules 后，它只返回与类选择器相关的样式。如何从外部样式表获取 id 相关样式？

注意:我使用的是 firefox。

var style_rules = document.styleSheets[0].cssRules;
console.log(style_rules.length); //2

for(var i=0; i < style_rules.length; i++) {

console.log(style_rules[i].selectorText); 
 console.log(style_rules[i].style.cssText);
 }

CSS 样式表:

//@import 'reset.css';

#content {
position:absolute;
top:200px;
left:200px;
height:200px;
width:200px;
}

.red {
background-color:red;
}

.green{
color:yellow;
background-color:green;
}

更新:如果我删除注释的@import，它对我来说很好用。似乎是错误。

Answer 1

问题是这一行

//@import 'reset.css';

// 形式在 CSS 中无效。您必须使用 /* 和 */ 来注释掉 CSS 代码。

/* @import 'reset.css'; */

现场演示: http://jsfiddle.net/u4v63/5/