CSS2.1的容错机制

 CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的 时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高 些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错机制了。

CSS2.1的容错方式总的来说就是：对于出现一些无效的属性、属性值、@-keywords等等，它就会忽视这些样式声明或者整个规则声明。对于无效的 属性、属性名会忽视该样式声明，对于@-keywords中keywords无效时，会将整个@-keywords包含的样式声明都忽略掉。

既然CSS2.1有这个容错机制，那么还有其他一些平时比较容易忽略的错误导致的样式失效的问题，下面举例出一些实例，看完下面的实例，基本可以了解CSS解析器解析CSS代码的一些原理了。

1. 不要在CSS每个规则之间插入除空格之外的无效字符或者插入不合CSS语法的注释，否则该无效字符之后的第一个规则无效，例如：

   body{color:green;}.  /*这里不小心多了个点号就杯具了*/
   p.ten{color:red; background-color:green;} /*这个规则是无效的*/
   p.one{color:red;} /*这个有效*/
   

   有一种情况比较特殊，当无效字符等使用大括号“{}”包含的时候，它下面的规则正常应用了，因为浏览器CSS解析器将它当作一条规则来处理。比如：

   body{color:green;}
   {.}
   p.ten{color:red; background-color:green;} /*它可以work啦*/
   

2. 跟上面对应的就是在样式中出现无效字符或者插入不合CSS语法的注释，则当前无效字符之后的第一条样式无效，例如：

   p.one{border-style:solid; . color:#00c; font-weight:bold;}  /*color无效*/
   

   但是有一种情况比较特殊，就是存在分号“;”的时候，前面带有无效字符也没影响。可能浏览器CSS解析器是将样式规则用分号进行拆分成数组，每个分号之前的样式不会影响下一个样式，比如：

   p.one{border-style:solid; . ; color:#00c; font-weight:bold;} /*color有效*/
   

   因此从这里，有可以引申出一个问题：当编写每一个样式的时候最后没有加上分号，当前样式的下一个样式就会无效，因为浏览器把它解析成一整个属性:属 性值对了（如果只有一个样式，或者是最后那个样式没有加上分号，则没什么影响。根据数组的split原理，建议是最后那个样式不加分号，这样就减少一个空 的数组元素），比如：

   /*下面就杯具了*/
   p.one{
     border-style:solid
     font-weight:bold
   }
   /*这还不错*/
   p.one{
     border-style:solid;
     font-weight:bold
   }
   

3. 不要在颜色值(英文、十六进制等等)上加上双引号，否则该样式规则无效，例如：

   body{color:"red";background-color:"green";}
   

4. 给元素设置border的时候，如果没有设置border-color，则会使用字体的颜色来代替；如果没有设置border-width，则默认是medium。例如:

   p.one{border-style:solid; color:#00c;}
   

5. 在一些连写的CSS规则中，如果其中一个元素的规则声明出现错误，则整个规则无效，比如：

   p.one,em @,strong{border-style:solid; color:#00c;} /*这里em @ 出错，造成整个规则失效*/
   

6. 如果在一个规则中样式进行了重复定义，如果其中一个样式的值无效（或者为空），那么不会覆盖有效的值的样式，因为浏览器会忽略掉无效值的样式声明，比如：

   p.ten{color:red; background-color:green;color:ss;} /*color还是red*/
   

7. 规则声明不可以嵌套：p.ten{color:#00c;p.ten{color:#f00};background:#0c0}
8. 在规则的特殊性方面，对元素声明样式时，将样式定义在它自身上和定义在它父元素上的优先级差别：将样式定义在子元素上，即使是使用标签类型的规则 都比父元素使用ID、class、important等这样高优先级的都高，比如：span是p元素的子元素，p带有ID属性为ten

   span{color:red;} /*文本的color样式还是red*/
   body p#ten{color:green !important;}
   

9. 对于无效的属性或者属性值，CSS解析器会直接忽略掉这些属性或者属性值，也就使得这条样式声明无效，比如：

   img { float: left }       /* correct CSS 2.1 */
   img { float: left here }  /* "here" is not a value of 'float' */
   img { background: "red" } /* keywords cannot be quoted */
   img { border-width: 3 }   /* a unit must be specified for length values */
   
   /*解析过后，是：*/
   img { float: left }
   img { }
   img { }
   img { }
   

10. 属性值中双引号和单引号要闭合，否则结果很悲剧，例如：

    p {
       color: green;
       font-family: 'Courier New Times
       color: red;
       color: green;
    }
    解析过后，就成了：
    p{
      color:green;
      color:green;
    }
    

平时是我们太循规蹈矩的去编写CSS代码了，对于一些因为粗心造成的失误而导致样式失效的问题，浏览器又没有很好的提示CSS错误的功能，所以只能是通过 肉眼看样式是否生效来测试CSS代码了。其实当你不遵循CSS语法来写的时候，会发现更多的CSS的解析失效问题，或许这就是CSS Hack被发现的源头吧……