CSS写法:不同组合间的优先级及浏览器的支持性


这下子彻底土了,昨天乱寻思,结果俺发现的问题令一大群人跟着土了个稀里糊涂。

先来看一段入门级的简单代码:

<div id="box" class="haha wowo gaga"></div>

这段代码代表一个ID为"box",拥有三个class属性(分别是"haha"、"wowo"、"gaga") 的DIV标签。

现在我想设置这个DIV层的宽度和高度都是300像素,背景色为绿色。我们可以这么设置:

对ID进行设置:
#box {
 height: 300px;
 width: 300px;
 background:#336600
}

或者类里面选一个进行设置,如:
.haha {
 height: 300px;
 width: 300px;
 background:#336600
}

OK,我知道现在肯定有人想骂我,说我写这东西是在侮辱大家的智商。但,且慢,似乎这么写也不为错——

.haha.wowo.gaga {
 height: 300px;
 width: 300px;
 background:#336600
}

或者
#box.haha.wowo.gaga {
 height: 300px;
 width: 300px;
 background:#336600
}

看清楚了,选择符之间没空格也没什么英文标点逗号。测试浏览器环境为IE6(IETester模拟)、IE7、Firefox 3.5.3、Chrome 4、Safari 4。

你之前见过这写法?真见过?确认?? ~ OK,要是没见过,来我们这边站队吧,我们一样土。

OK,进一步研究下,首先确认是否复合W3C标准。

在线验证下,结果是通过CSS 2.1 效验。

接下来,看看还有哪些组合、优先级及兼容性。

首先实验选择符间的组合,XHTML代码依然如上。ID值我们使用"id"代替,三个class属性我们使用"class1"、"class2"、"class3"代替。

组合/浏览器支持
IE6
IE7
Chrome
Firefox
Safari
单id
单class
class间任意组合
(如.class1.class2、
.class1.class2.class3)
id与class间任意组合
(如#id.class1.class2
#id.class1.class2.class3)

OK,再来看下不同组合间的优先级及浏览器的支持性。

组合优先级/浏览器支持
IE6
IE7
Chrome
Firefox
Safari
同元素内
class间组合
数量决定优先级
如.class1.class2 > .class1
X
同元素内
id、class间组合
数量决定优先级
如#id.class1.class2 > #id .class1
X
同元素内
id大于class间任意组合
如#id > .class1.class2.class3
同元素内
id、class组合大于单独id、class
如#id.class1 > #id

 

得了,就土到这了。

这下子彻底土了,昨天乱寻思,结果俺发现的问题令一大群人跟着土了个稀里糊涂。

先来看一段入门级的简单代码:

<div id="box" class="haha wowo gaga"></div>

这段代码代表一个ID为"box",拥有三个class属性(分别是"haha"、"wowo"、"gaga") 的DIV标签。

现在我想设置这个DIV层的宽度和高度都是300像素,背景色为绿色。我们可以这么设置:

对ID进行设置:
#box {
 height: 300px;
 width: 300px;
 background:#336600
}

或者类里面选一个进行设置,如:
.haha {
 height: 300px;
 width: 300px;
 background:#336600
}

OK,我知道现在肯定有人想骂我,说我写这东西是在侮辱大家的智商。但,且慢,似乎这么写也不为错——

.haha.wowo.gaga {
 height: 300px;
 width: 300px;
 background:#336600
}

或者
#box.haha.wowo.gaga {
 height: 300px;
 width: 300px;
 background:#336600
}

看清楚了,选择符之间没空格也没什么英文标点逗号。测试浏览器环境为IE6(IETester模拟)、IE7、Firefox 3.5.3、Chrome 4、Safari 4。

你之前见过这写法?真见过?确认?? ~ OK,要是没见过,来我们这边站队吧,我们一样土。

OK,进一步研究下,首先确认是否复合W3C标准。

在线验证下,结果是通过CSS 2.1 效验。

接下来,看看还有哪些组合、优先级及兼容性。

首先实验选择符间的组合,XHTML代码依然如上。ID值我们使用"id"代替,三个class属性我们使用"class1"、"class2"、"class3"代替。

组合/浏览器支持 IE6 IE7 Chrome Firefox Safari
单id
单class
class间任意组合
(如.class1.class2、
.class1.class2.class3)
id与class间任意组合
(如#id.class1.class2
#id.class1.class2.class3)

OK,再来看下不同组合间的优先级及浏览器的支持性。

组合优先级/浏览器支持 IE6 IE7 Chrome Firefox Safari
同元素内
class间组合
数量决定优先级
如.class1.class2 > .class1
X
同元素内
id、class间组合
数量决定优先级
如#id.class1.class2 > #id .class1
X
同元素内
id大于class间任意组合
如#id > .class1.class2.class3
同元素内
id、class组合大于单独id、class
如#id.class1 > #id

 

得了,就土到这了。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3