轉自知乎上的回答：http://www.zhihu.com/question/20077745
解答一：
層疊指的是樣式的優先順序，當產生衝突時以優先順序高的為準。
1. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記 ）
2. id選擇符>（偽）類選擇符>元素選擇符
3. 權重相同時取後面定義的樣式
以下是一段經典的html，三個類名分別為模組、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面都可以由這種結構巢狀或者累加而成。
解答二：
CSS層疊是指CSS樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理衝突，選擇應用權重高的CSS選擇器所指定的屬性，一般也被描述為權重高的覆蓋權重低的，因此也稱作層疊。每個CSS選擇器都會有一個權重（行內1000，id100，class10，tag1、可以這樣認為），當兩個選擇器同時配置同一元素的同一屬性時（比如一個設定color：red，另一個color：black），就會產生衝突，而解決衝突的方案就是CSS選擇器的權重，權重高的來覆蓋權重低的。
另外，繼承的屬性是權重重最輕的，會被上面的四個定義方式覆蓋。
CSS語義化其實更多地是指HTML的語義化。 比如下面的一個程式碼我們這樣寫：
<div class="box">
<div class="h2">這是區塊標題</div>
<div class="bd">這是區塊內容</div>
<div>
但是語義化的寫法更能使得 robot識別網頁的結構，下面是語義化的寫法：
<section>
<h2>這是區塊標題</h2>
<p>這是區塊內容</p>
</section>
對於robot來說，它能夠識別section（區塊）、h2(二級標題)、p(文欄位落)，但是不能識別出div所包含的內容，因為div這個標記本身是無語義的（必要時通過class或id屬性來賦予語義，但是這是次優選擇）。 而HTML5新增的article、header、footer、nav、section等標籤就是豐富了HTML原生的語義標籤，在很大程度上滿足了HTML編寫的需要。
解答三：
CSS語義化的命名是指用易於理解的名稱對html標籤附加的class或id命名，如對於頁面上方的<div>，可將其id設為header；頁面下方的<div>設為footer，可以增強CSS的可維護性。
基本上層疊的意思就是“繼承”、“權重”、“覆蓋”，通過良好的層級命名更好的實現效果，更少的程式碼，更多的功能