CSS基礎4--衝突和繼承
阿新 • • 發佈：2020-09-17
衝突
在預設情況下，一些css屬性繼承當前元素的父元素上設定的值，有些則不繼承。這也可能導致一些和期望不同的結果
層疊
當應用兩條同級別的規則到一個元素的時候，寫在後面的就是實際使用的規則
簡而言之，在最後的效果會生效
優先順序
元素選擇器不是很具體：優先順序低
類選擇器稍微具體點： 優先順序高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信搜尋：伊洛的小屋</title> <link href="index.css" rel="stylesheet" type="text/css"> </head> <body> <h1 class="h-color">猜猜我是什麼顏色的</h1> </body> </html>
編寫下CSS檔案
.h-color {
color: red;
}
h1 {
color: blue;
}
開啟瀏覽器檢視效果
可見效果是紅色的
繼承
父元素上的css屬性是可以被子元素繼承
控制繼承
inherit： 設定該屬性會使子元素屬性和父元素相同
initial： 設定屬性值和瀏覽器預設樣式相同
unset： 將屬性重置為自然值，也就是如果屬性是自然繼承那麼就是inherit，否則就是initial
考慮層疊
三個因素需要考慮
1.重要程度
2.優先順序
3.資源順序
不同型別的選擇器有不同的分數值，把這些分數相加就得到特定選擇器的權重，然後就可以進行匹配