2020-4-18 前端達(dá)人
文章目錄
繼承性的描述：
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父類(lèi)的屬性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依舊是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我這里體現(xiàn)了層疊性呀</p>
</body>
</html>
使用結(jié)論
由于內(nèi)容有限，但是結(jié)論是一定的，所以我直接給出結(jié)論：
若多個(gè)選擇器定義的樣式不沖突，則元素應(yīng)用所有選擇器定義的樣式。
若多個(gè)選擇器定義的樣式發(fā)生沖突（比如：同時(shí)定義了字體顏色屬性），則CSS按照選擇器的優(yōu)先級(jí)，讓元素應(yīng)用優(yōu)先級(jí)搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級(jí)從高到低為：行內(nèi)樣式–>ID樣式–>類(lèi)樣式–>標(biāo)記樣式。
如若想直接定義使用哪個(gè)樣式，不考慮優(yōu)先級(jí)的話，則使用!important，把這個(gè)加在樣式后面就行了。
優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一個(gè)元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。層疊性和選擇器的圈中有很大的關(guān)系。
優(yōu)先級(jí)的使用說(shuō)明
權(quán)重分析：
內(nèi)聯(lián)樣式：如：style=""，權(quán)重為1000。
ID選擇器，如：#content，權(quán)重為100。
類(lèi)，偽類(lèi)和屬性選擇器，如.content，權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)重為1。
繼承樣式，權(quán)重為0。
將基本選擇器的權(quán)重相加之和，就是權(quán)重大小，值越大，權(quán)重越高。
計(jì)算權(quán)重方法
數(shù)標(biāo)簽：先數(shù)權(quán)重最高的標(biāo)簽，然后數(shù)第二高權(quán)重的標(biāo)簽，以此類(lèi)推，就會(huì)生成一個(gè)數(shù)組，里面包含四個(gè)數(shù)字。
比如（0，0，0，0）分別對(duì)應(yīng)（行內(nèi)式個(gè)數(shù)，id選擇器個(gè)數(shù)，類(lèi)選擇器個(gè)數(shù)，標(biāo)簽選擇器個(gè)數(shù)）
然后兩個(gè)選擇器通過(guò)對(duì)別四個(gè)數(shù)字的大小，確定權(quán)重關(guān)系。
例：
#box ul li a.cur有1個(gè)id標(biāo)簽，1個(gè)類(lèi)，3個(gè)標(biāo)簽，那么4個(gè)0就是（0，1，1，3）
.nav ul .active .cur有0個(gè)id，3個(gè)類(lèi)，1個(gè)標(biāo)簽，那么4個(gè)0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我們來(lái)試一下優(yōu)先級(jí)</p>
</body>
</html>
先推測(cè)一波，因?yàn)榍懊嬷v到了ID選擇器的權(quán)重是大于類(lèi)選擇器的，所以這里顏色應(yīng)該為red。
效果如下：
推測(cè)正確！優(yōu)先級(jí)GET！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.tuitetiyu.cn