WonderCSS

CSS编写中实用的技巧:class联用

前几天忽然发现了一个class的用法,对于我这个做网页设计近十年的人来说,实在是忒后知后觉了。想一想或许是由于以往对ID和class的吝啬,以及对代码的洁癖的书写习惯所致。

废话不说了。对于一个DIV或任何HTML标签附加样式,时常需要用到多个class同时附加到一个容器上。比如:

<div class="box yellow red"></div>

这个DIV上加了3个class:box yellow red 。STYLE样式为:


<style type="text/css">
	.box {
		width:80px;
		height:80px;
	}
	.yellow {
		background-color:#ffff00;
	}
	.red {
		background-color:#ff0000;
	}
	.yellow.red {
		background-color:#FF9900;
	}
</style>

结果这个DIV显示出来的背景颜色不是 .yellow 和 .red 的效果,而是 .yellow.red 的背景颜色 #FF9900

简单图示:

class

.yellow.red 就是class的联写,它等同于 .red.yellow 前后顺序没区别,这样在复杂也页面结构下就能实现出更丰富的效果。值得注意的是这个联写方式除了陈旧的IE6其他浏览器都识别。

By 于湛 发布于 2013.02.2 1,585 次浏览

CSS编写中实用的技巧:class联用》上有1条评论

  1. Pingback引用通告: 让我们来了解18个常用CSS选择器吧 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注