首頁 >web前端 >html教學 >CSS層疊性、繼承性、特殊性的實例詳解

CSS層疊性、繼承性、特殊性的實例詳解

零下一度原創: 2017-06-24 13:40:263767瀏覽

層疊性

所謂層疊性是指多種CSS樣式的疊加，也就是說後面設定的樣式會層疊（覆蓋）之前的樣式，層疊性的前提是CSS的選擇器的優先權相同，例如，當使用內嵌式CSS樣式表定義

標記字號大小為12像素，鏈入式定義

標記顏色為紅色，那麼段落文字將會顯示為12像素紅色，即這兩種樣式產生了疊加。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5  6     <title>CSS层叠性</title> 7     <style> 8         .box { 9             background-color: red;10             height: 200px;11             width: 200px;12         }13 14         .wrap {15             background-color: green;16         }17     </style>18 </head>19 <body>20     <div class="box wrap">21         22     </div>23 </body>24 </html>

瀏覽器顯示的結果為長寬各為200像素，背景色為綠色的div，原因是box中定義的背景色被wrap中定義的背景色覆蓋了

透過瀏覽器的F12檢視元素，也可以看出

繼承性

CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但並不是所有的樣式都能繼承。只有部分樣式能繼承，例如：文字相關字體大小、顏色、字體樣式、行高、滑鼠樣式等。

盒子相關的樣式都不能繼承，例如：寬高、背景色、邊距、浮動、絕對定位等。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS继承性</title> 6  7     <style type="text/css"> 8         .parent { 9             color: red;10             font-size: 20px;11             height: 300px;12             width: 300px;13             background-color: green;14         }15 16         .child {17             height: 100px;18             width: 100px;19         }20     </style>21 22 </head>23 <body>24     <div class="parent">25         我是父div26         <p>27             我是段落28         </p>29 30         <div class="child">我是子div</div>31     </div>32 </body>33 </html>

效果如下：