Css选择器命规则.docVIP

操作系统版本：Windows 7 浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器：所有浏览器. 经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式.. 一、关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。 由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。 关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节 二、差异及可能产生的问题 在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除 此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？ 请观察如下代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 ? div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;} ? .f-1_f_{background-color:#d4d4d4;} ? .1{background-color:#A8A8A8;} ? .123456{background-color:#d4d4d4;} ? .2demo{background-color:#A8A8A8;} ? .2-demo?{background-color:#d4d4d4;} ? .2_demo?{background-color:#A8A8A8;} ? .-demo{background-color:#d4d4d4;} ? .-2demo?{background-color:#A8A8A8;} ? ._demo?{background-color:#d4d4d4;} ? ._2demo?{background-color:#A8A8A8;} ? .-{background-color:#d4d4d4;} ? .---{background-color:#A8A8A8;} ? ._{background-color:#d4d4d4;} ? .——{background-color:#A8A8A8;} ? ._-{background-color:#d4d4d4;} ? .-_{background-color:#A8A8A8;} ? .-{background-color:#d4d4d4;} ? .---_{background-color:#A8A8A8;} ? .---123{background-color:#d4d4d4;} ? .__123{background-color:#A8A8A8;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 div class=f-1_f_字母开头/div div class=1单个数字/div div class=123456多个数字/div div class=2demo数字开头 + [a-z][A-Z]/div div class=2-demo数字 + - 开头/div div class=2_demo数字 + _ 开头/div div class=-demo连字符(-)开头 + [a-z][A-Z]/div div class=-2demo连字符(-) + 数字 开头/div div class=_demo下划线(_)开头 + [a-z][A-Z]/div div class=_2demo下划线(_) + 数字 开头/div div class=-单个连字符(-)/div div class=---多个连字符(-)/div div class=_单个下划线(_)/div div class= 多个下划线(_)/div div class=_-下划线(_) + 连字符(-)/div div class=-_连字符(-) + 下划线(_)/div div class= -多个下划线(_