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

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS写法:不同组合间的优先级及浏览器的支持性

CSS样式表: CSS优先级规则的细节; CSS失效，原来是和网页第一段代码有关; 你真的了解CSS吗？你是属于哪个层次？; 让样式表CSS代码更加专业规范; 建议网页设计师用CSS制作网站导航菜单; 简单学习css组合与CSS嵌套的写法; CSS学习之css代码的简写的十条规则; 条件CSS的介绍; CSS教程:网页中多个样式表顺序问题; CSS教程：网页版面设计无效的10个原因; 页面重构工程师应该具有的技能和素质; 选择正确DOCTYPE解决CSS在网页失效问题; Opera中国的WEB标准课程; 简单介绍Web Developer插件制作网页; CSS布局带来的巨大影响:CSS display属性值; 用div css模拟表格对角线; IE Firefox在css中的差别 (部分); 不用js可以实现信息提示效果; CSS解决未知高度的垂直水平居中自适应问题; CSS cursor 属性 -- 鼠标指针样式效果

技术文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 75 ::

收藏到网摘: n/a

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

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

<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	√	√	√	√	√

得了，就土到这了。