CSS3選擇器優(yōu)先順序是個(gè)重要的概念,它決定了我們在編寫CSS樣式時(shí),不同選擇器的優(yōu)先級(jí)順序。在樣式?jīng)_突時(shí),優(yōu)先順序決定了哪個(gè)樣式規(guī)則將被應(yīng)用。下面我們來一一介紹:
元素選擇器 .class 選擇器 #id 選擇器 內(nèi)聯(lián)樣式 style !important /* 元素選擇器優(yōu)先級(jí)最低 */ div { background-color: red; } /* class 選擇器優(yōu)先級(jí)高于元素選擇器 */ .section { background-color: blue; } /* id 選擇器優(yōu)先級(jí)高于 class 選擇器 */ #intro { background-color: green; } /* 內(nèi)聯(lián)樣式優(yōu)先級(jí)最高 */我是內(nèi)聯(lián)樣式
/* !important 優(yōu)先級(jí)最高,會(huì)覆蓋一切 */ p { background-color: orange !important; }
以上就是CSS3選擇器優(yōu)先順序的詳細(xì)介紹。當(dāng)我們編寫CSS樣式時(shí),應(yīng)該充分考慮優(yōu)先級(jí),避免樣式?jīng)_突造成不必要的麻煩。