|
操作系统版本：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说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除 此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？
请观察如下代码：
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=" -">多个下划线(_) + 连字符(-)</div>
<div class="---_">多个连字符(-) + 下划线(_)</div>
<div class="---123">多个连字符(-) + 数字</div>
<div class=" 123">多个下划线(_) + 数字</div>
|
|
