css样式层叠的应用

今天做了一个专题页，应用到了css的特殊性和继承。其实叠层样式就是通过继承和特殊性来实现的。

代码逻辑结构如下：

div.content>(div.bgb.con1+div.bgb.con2)

 解释：

1.设计图是一个年货专场，分为自提商品和快递商品两块。代码中用con1和con2来表示。自提商品和快递商品块中都有背景。

2.公司专题页有专门的模板，专题中的商品背景都是白色的。

3.设计图中给出一个固定高度的渐变背景。但是在自提和快递容器中存放的商品个数是不确定的。

给出的解决方案是：

1.将一整个渐变背景都放在自提类商品中，渐变到一定距离，下面就用纯色。

2.快递类商品继续用纯色。

因为专题页中很多都是公用样式，不能去删除那些样式，只能在私有的样式表中加样式，通过层叠来覆盖，代码如下：

原来的样式：

.bgb{ background:#fff;}

新加的样式：

.content{ background:url(img/ny_goods_con.jpg) repeat-y; }
.con1{ background: url(img/ny_goods_con1.jpg) no-repeat;}
.con2{ background:url(img/ny_goods_con.jpg) repeat-y; }

 这样一来：

1. .con1 .con2会覆盖.bgb的样式（根据出现顺序）

2.因为ny_goods_con1.jpg是有高度的，当存放的商品超出背景高度的时候，就会显示.content的背景色。（注意：这个不是继承父亲的背景色，而是因为默认的背景颜色是透明的，因为超出部分没有背景色，所以就看到了父亲的背景。再注意：超出部分不会显示.bgb的背景色，因为.bgb已经被.con给覆盖了。）

3.要给.con2设置背景。如果你觉得让他直接透过父亲的颜色，那你就错了，因为如果不给.con2设置背景，那么.bgb就会生效。

最后的专题页的效果如下：2013新春年货囤起来