## CSS優先級和層疊 > CSS是網頁的裝修工，選擇器就是我們需要裝修工裝修的位置，而如果同時兩個人同時對一個位置提出了兩種裝修需求，我們到底聽誰的呀？ ~~~html <div id="jack" class="tom"> <br> </div> ~~~ ~~~css .tom{ background-color: blue; } #jack{ background-color: red; } ~~~ > 類選擇器和ID選擇器同時選擇到了同一個元素，瀏覽器最終聽了ID選擇器的。 > 為什么會這樣呢？我們要引入優先級的概念。 ### 選擇器優先級 > 我們將優先級分為四個等級。 |級別|選擇器|權重| |---|---|---| |A|行內樣式|1000| |B|ID選擇器|100| |C|類、偽類和屬性選擇器|10| |D|標簽選擇器和偽元素選擇器|1|  ### 層疊 > 選擇器有優先級，我們看到當兩個選擇器選擇同樣元素并且同樣的樣式的時候，會根據優先級來確定樣式。 > 而如果兩個選擇器選擇同一元素使用不同的樣式屬性呢？ CSS有層疊機制 ~~~html <div id="jack" class="tom"> <p>我是岳云鵬！</p> </div> ~~~ ~~~css .tom{ background-color: blue; color: green; } #jack{ background-color: red; } ~~~ ### 繼承 CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。 ~~~html <p> CSS樣式表<em>繼承特性</em>的演示代碼 </p> ~~~ ~~~css p { color:red; } ~~~ > 這個時候p標簽中的所有文本包括em標簽中的文本都會變成紅色。 >當然也不是所有的css屬性都會被子類繼承，例如border屬性。繼續利用上面的一段代碼。我們為p元素添加border屬性。 ~~~css p { border: 1px solid red; } ~~~ [可繼承元素與部可繼承元素整理](http://blog.csdn.net/hicoldcat/article/details/64443280)