前端-CSS-3-繼承性&層疊性&權重比較
阿新 • • 發佈：2018-11-08
1、繼承性
<style type="text/css"> .father{ font-size: 30px; background-color: green; } .child{ color: purple; } </style> </head> <body> <!-- 繼承：給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承 有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* 文字元素 像一些盒子元素，定位的元素（浮動，絕對定位，固定定位）不能繼承 --> <div class="father" id="egon"> <div class="child"> <p>alex</p> </div> </div> <p>小馬哥</p> </body>
2、層疊性
總結：
1.先看標籤元素（實際顯示的內容）有沒有被選中，如果選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重一樣大，後來者居上
2.如果沒有被選中標籤元素，權重為0。
如果屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
<style type="text/css"> /*<!-- */ /*層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了*/ /*權重： 誰的權重大，瀏覽器就會顯示誰的屬性*/ /**/ /*誰的權重大？ 非常簡單 數數*/ /**/ /*id的數量 class的數量 標籤的數量*/ /*-->*/ #box{ color: red; } .container{ color: yellow; } p{ color: #2aabd2; } </style>
-------------------------------------------------------------------------
/*id的數量 class的數量 標籤的數量*/
3、！important
<!-- ！important:設定權重為無限大
!important 不影響繼承來的權重，隻影響選中的元素
-->
不講道理的!import方式來強制讓樣式生效，但是不推薦使用。因為大量使用!import的程式碼是無法維護的。
<style type="text/css"> p{ color: red !important; font-size: 30px; } .spe1{ color: yellow ; font-size: 40px; } .spe2{ color: green; font-size: 40px; } ul{ color: red; } .list{ color: purple !important; } </style>
選擇器的優先順序
