Css三大特性
繼承性
特性：子元素有默認繼承父元素樣式的特點
可以繼承的常見屬性有：
1、color
2、font-style、font-weight、font-size、font-family
3、text-indent、text-align
4、line-height
5.....
例如：
<style>
.father{
color: red;
}
</style>
</head>
<body>
<div >
父親
<div >
兒子
</div>
</div>
</body>
注意點：可以通過除錯工具判斷樣式是否可以繼承
常見的應用場景：
1、可以直接給ul設定list-style：none屬性，從而去除串列默認的小圓點樣式，
2、直接給body標簽設定統一的font-size，從而統一不同瀏覽器默認文字大小，
繼承失效的情況
1、如果元素有瀏覽器設定的默認樣式，此時繼承性仍然存在，但是優先顯示瀏覽器默認的樣式，
2、a標簽的color會繼承失效，
其實是有繼承的，只不過是優先使用了瀏覽器默認的樣式，
3、h系列標簽的font-size會繼承無效，
原因同上
4、div的高度不能繼承，但是寬度有類似于繼承的效果，
層疊性
特性：1、給同一個標簽設定不同的樣式---此時樣式會層疊疊加--會共同作用在標簽上，
2、給同一個標簽設定相同的樣式---此時樣式會層疊覆寫---最終寫在最后的樣式會生效，
注意點：當樣式沖突時，只有當選擇器優先級相同時，才能通過層疊性判斷結果，
優先級
能夠計算CSS權重，并解決CSS樣式沖突問題
特性：不同選擇器有不同的優先級，優先級高的選擇器樣式會覆寫優先級低的選擇器樣式，
優先級公式：繼承<通配符選擇器<標簽選擇器<類選擇器<id選擇器<行內樣式<！important
注意點：
1、！important寫在屬性值的后面，分號的前面
2、！important不能提升繼承的優先級，只要是繼承優先級最低
3、實際開發中不建議使用！important
權重疊加計算
場景：如果是符合選擇器，此時需要通過權重疊加計算方法，判斷最終哪個選擇器優先級最高會生效，
公式（每一級之間不存在進位，四個是分別對應的）
第一級 第二級 第三極 第四級
? （0， 0 ， 0 ，0）
行內樣式個數 id選擇器個數 類選擇器個數 標簽選擇器個數
比較規則：
1、先比較第一級數字，如果比較出來了，之后的統統不看，
2、如果第一級數字相同，此時再比較第二級數字，如果比較出來了，之后的統統不看，
3、，，，，
4、如果最終所有數字都相同，表示優先級相同，則比較層疊性(誰寫在下面，誰說了算)
注意點：如果！important不是繼承，則權重最高，
<style>
/*0,1,0,1*/
div #one{
color: skyblue;
}
/*0,0,2,0*/
.father .son{
color: skyblue;
}
/* 0,0,1,1*/
.father p{
color: purple;
}
/* 0,0,0,2*/
div p{
color: pink;
}
</style>
</head>
<body>
<div >
<p id="one">我是個標簽</p>
</div>
</body>
一般解題步驟
1、先判斷選擇器是否能直接選中標簽，如果不能直接選中---->是繼承，優先級最低----->直接pass
2、通過權重計算公式，判斷誰的權重最高，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413065.html
標籤：Html/Css
上一篇：rem自適應移動端布局
下一篇：深入淺出 CSS 影片