一色查、css樣式的來源
- 使用不同的選擇器設置的樣式
- 瀏覽器默認的樣式（user agent stylesheet）
- 繼承的樣式 (inherited from xxx)
二技矮、 選擇器的優(yōu)先級
1. 從高到低順序分別是：
!importtant>內(nèi)聯(lián)樣式>選擇器設置樣式>瀏覽器默認樣式>繼承樣式
①. 在屬性后面使用!important會覆蓋頁面內(nèi)任何位置定義的元素樣式
②. 作為Style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
③. 選擇器設置的樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通用選擇器
④. 瀏覽器默認樣式
⑤. 繼承樣式
!important:優(yōu)先級最高切油，需要覆蓋內(nèi)聯(lián)樣式就可以使用
<div class="box">
<p>hello</p>
</div>
<style>
p{
color: red!important;
}
.box p{
color: blue;
}
</style>
2. 瀏覽器默認樣式
瀏覽器默認樣式
3.繼承樣式
①：繼承屬性與非繼承屬性
- 繼承屬性：和文本相關的大部分可以繼承贫导。
color烹玉、font-size叁幢、font-family卖宠、line-height - 非繼承屬性
border巍杈、background、margin扛伍、padding筷畦、display
查詢是否繼承屬性鏈接：https://www.w3.org/TR/CSS21/propidx.html
4. 控制繼承
-
inherit:使用繼承父級的樣式 -
initial使用該屬性的initialvalue（該默認值不是瀏覽器默認值user agent stylesheet，而是屬性默認值：） -
unset:如果是繼承屬性則繼承父級刺洒，如果是非繼承屬性就用initial value
控制繼承
5. 設置的樣式：不同屬性會疊加鳖宾，相同屬性會覆蓋
- 選擇器優(yōu)先級不同：優(yōu)先級高的會覆蓋優(yōu)先級低的
- 選擇器優(yōu)先級相同：后面的會覆蓋前面的
6. 優(yōu)先級計算
- 千位：如果聲明在style的屬性（內(nèi)聯(lián)樣式）則該位得一分
- 百位：選擇器中包含ID選擇器則該位得一分
- 十位：選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分
-
個位：選擇器中包含元素逆航，偽元素選擇器則該位得一分
注意 ：通用選擇器（*）鼎文，組合符（+，>因俐，~拇惋，' '）周偎，和否定偽類（:not)不會影響優(yōu)先級）
優(yōu)先級計算
參考：饑人谷課件
