Tengo 3 bloques de reglas de estilo en mi hoja de estilo. 1 selector de ID 2 selectores de clase

Después de consultar cssRules desde CSSStyleSheet, solo devuelve estilos relacionados con el selector de clases. ¿Cómo obtener estilos relacionados con la identificación de una hoja de estilo externa?

Nota: estoy usando 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);
 }

Hoja de estilo 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;
}

Actualizado: si elimino el @import comentado, funciona bien para mí. Parece ser un error.

0
P K 26 nov. 2011 a las 02:05
Publique la URL en ese archivo CSS externo.
 – 
Šime Vidas
26 nov. 2011 a las 02:33
Me funciona: jsfiddle.net/u4v63/2
 – 
Šime Vidas
26 nov. 2011 a las 02:35
Estoy usando en localhost.
 – 
P K
26 nov. 2011 a las 02:35
Actualizado: si elimino el @import comentado, funciona bien para mí. Parece ser un error.
 – 
P K
26 nov. 2011 a las 02:37
1
El // no es válido en CSS. Para comentar en CSS, use /* y */ ...
 – 
Šime Vidas
26 nov. 2011 a las 02:40

1 respuesta

La mejor respuesta

El problema es esta linea

//@import 'reset.css';

El formulario // no es válido en CSS. Tienes que usar /* y */ para comentar el código CSS.

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

Demostración en vivo: http://jsfiddle.net/u4v63/5/

2
Šime Vidas 26 nov. 2011 a las 02:42