JavaScript CSS修改学习第三章：修改样式表

核心提示： 现在theRules就包含了所有的样式规则，规则的数目这是样式表:01@importurl("test.css");0203p,h2,h3{04padding-right:10px;05}0607pre.test+*{08margin-right:20%;09}1011pre

现在theRules就包含了所有的样式规则。

规则的数目

这是样式表:

01　@import　url("test.css");
02　　
03　p,h2,h3　{
04　　　　　padding-right:　10px;
05　}
06　　
07　pre.test　+　*　{
08　　　　　margin-right:　20%;
09　}
10　　
11　pre.test　{
12　　　　　background-color:　#ffffff;
13　}

在你看来可能是4条规则：@import 然后是p,h2,h3，接着pre.test + *，最后是pre.test。然而浏览器可不这么看。

Safari看见的是4条规则：

0、undefined

1、P

2、PRE.test[CLASSS~="test"]+*

3、PRE.test[CLASSS~="test"]

注意大写

IE7beta3看见了5条：

0、P

1、H2

2、H3

3、PRE.test + *

4、PRE.test

注意大写

Mac IE也看见5条：

0、P

1、H2

2、H3

3、PRE.test * （注意没有+号）

4、PRE.test

注意大写

Mozilla和Opera 9看见4条：

0、undefined

1、p,h2,h3

2、pre.test + *

3、pre.test

注意小写

非常棒的混乱！

1、IE认为p,h2,h3是三条而不是一条规则，而Safari则只取p。知道现在我才知道这是一种不正确的写法。

2、Mac IE把选择器改成了pre.test *，这样含义就非常不一样了。非常严重的问题。

3、除了Safari给pre.test添加了不必要的表达式以外，这个是支持最好的了。

所以要访问pre.test在Safari和Mozilla里需要cssRules[3]，而IE是rules[4]，早期的Mozilla是cssRules[5]。很可爱，不是么？

编缉推荐阅读以下文章

• JavaScript CSS修改学习第五章：给“上传”添加样式
• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表