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新春年貨囤起來