今天看到一個非常好用的樣式用法，給已經在睡夢中蘇醒的你們來一段代碼頭腦風暴。
大家都知道現在div+css布局的使用已經不是可以用潮流來概括的了，換個詞應該是：普及。
以前的表格布局現在是少之極少，因為表格布局會產生太多的字符數，而且代碼版面沒有div+css樣式來得簡潔明了。
很多設計員應該都知道一個樣式對應一個class，那么反過來呢，是不是也是一對一的關系？我想不是的，css樣式不會局限於此，這就是css樣式的強大之一了。
接下來看下class對應多個樣式究竟怎么寫？為了方便大家查看代碼，我就直接復制代碼下來了，方便講解。
大家把目標鎖定在加粗的部分，稍微懂一點代碼的人都應該可以發現我最后一個div的class是這樣的class="bottom content"，注意這個bottom和content之間的空格。這樣的樣式應用是什么意思呢？
這就是我今天要分享的。這種就是樣式的交叉應用，也可以稱為樣式疊加法。
當兩個樣式之和是你要的第三個樣式的時候，你就沒有必要在去書寫第三個樣式了，直接使用樣式的交叉使用方法，這樣可以省去你很多編寫樣式的時間。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--來源：http://www.maxhb.net--> <title>無標題文檔</title> </head> <style type="text/css"> .top { font-weight:bold} .content {background-color:#F00;} .bottom { font-size:20px;} .yanse {color:#0F0} </style> <body> <div class="top"> 這里單獨設置字體加粗！ </div> <div class="content"> 這里單獨設置字體的顏色！ </div> <div class="bottom"> 設置的是字體的大小！ </div> <div class="bottom content"> 設置字體的大小和背景顏色！ </div> </body> </html>