CSS樣式優(yōu)先級(jí)的問題其實(shí)就是當(dāng)我們“有意或無意”對(duì)一個(gè)元素設(shè)置了多個(gè)樣式時(shí),頁面最終會(huì)顯示哪個(gè)效果的問題。優(yōu)先級(jí)在css 中就是給指定的CSS 聲明分配一個(gè)權(quán)重
要了解這些權(quán)重的情況写烤,首先要了解CSS 選擇器锌雀,因?yàn)閮?yōu)先級(jí)是基于選擇器來計(jì)算的蹂随。
基礎(chǔ)的選擇器有:元素選擇器(<p>,<div>)—— 【p{ } 】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 類選擇器(class = “類名”)——【 ?. 類名{ }】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? id 選擇器(id=“id名”)—— 【#id名 {}】
選擇器的優(yōu)先級(jí)是這樣的:
元素選擇器(p,h1) ?< ?類選擇器(. ) < id 選擇器(#)
即id選擇器將被優(yōu)先顯示琉预。
值得注意的是:?給元素添加的內(nèi)聯(lián)樣式?(如,?style="font-weight:bold") 會(huì)始終覆蓋外部樣式表的任何樣式?,所以姐直,內(nèi)聯(lián)樣式具有最高的優(yōu)先級(jí)倦淀。
即,?內(nèi)聯(lián)樣式(標(biāo)簽內(nèi))>嵌入樣式(當(dāng)前文件中)>外部樣式(外部文件中)
同時(shí)声畏,關(guān)于樣式層疊的優(yōu)先級(jí)撞叽,在同樣的權(quán)重優(yōu)先級(jí)下姻成,后面的樣式始終會(huì)覆蓋前面的樣式。
通配選擇符(universal selector)(*),?關(guān)系選擇符(combinators) (+,?>,?~, '?') ?和?否定偽類(negation pseudo-class)(:not())?對(duì)優(yōu)先級(jí)沒有影響愿棋。
參考內(nèi)容:
關(guān)于優(yōu)先級(jí):優(yōu)先級(jí)是如何計(jì)算的科展?
關(guān)于選擇器:元素選擇器