今天做了一个专题页，应用到了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新春年货囤起来