2020-4-18 前端達人
文章目錄
繼承性的描述:
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性,即子元素可以繼承父類的屬性。
例:
<!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é)論:
若多個選擇器定義的樣式不沖突,則元素應(yīng)用所有選擇器定義的樣式。
若多個選擇器定義的樣式發(fā)生沖突(比如:同時定義了字體顏色屬性),則CSS按照選擇器的優(yōu)先級,讓元素應(yīng)用優(yōu)先級搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級從高到低為:行內(nèi)樣式–>ID樣式–>類樣式–>標(biāo)記樣式。
如若想直接定義使用哪個樣式,不考慮優(yōu)先級的話,則使用!important,把這個加在樣式后面就行了。
優(yōu)先級
定義CSS樣式時,經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一個元素上,這時就會出現(xiàn)優(yōu)先級的問題。層疊性和選擇器的圈中有很大的關(guān)系。
優(yōu)先級的使用說明
權(quán)重分析:
內(nèi)聯(lián)樣式:如:style="",權(quán)重為1000。
ID選擇器,如:#content,權(quán)重為100。
類,偽類和屬性選擇器,如.content,權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器,如div p,權(quán)重為1。
繼承樣式,權(quán)重為0。
將基本選擇器的權(quán)重相加之和,就是權(quán)重大小,值越大,權(quán)重越高。
計算權(quán)重方法
數(shù)標(biāo)簽:先數(shù)權(quán)重最高的標(biāo)簽,然后數(shù)第二高權(quán)重的標(biāo)簽,以此類推,就會生成一個數(shù)組,里面包含四個數(shù)字。
比如(0,0,0,0)分別對應(yīng)(行內(nèi)式個數(shù),id選擇器個數(shù),類選擇器個數(shù),標(biāo)簽選擇器個數(shù))
然后兩個選擇器通過對別四個數(shù)字的大小,確定權(quán)重關(guān)系。
例:
#box ul li a.cur有1個id標(biāo)簽,1個類,3個標(biāo)簽,那么4個0就是(0,1,1,3)
.nav ul .active .cur有0個id,3個類,1個標(biāo)簽,那么4個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">我們來試一下優(yōu)先級</p> </body> </html>
先推測一波,因為前面講到了ID選擇器的權(quán)重是大于類選擇器的,所以這里顏色應(yīng)該為red。
效果如下:
推測正確!優(yōu)先級GET!
藍藍設(shè)計的小編 http://m.sillybuy.com