css3 - CSS優(yōu)先級(jí)問題
問題描述
一直在說important的優(yōu)先級(jí)最高,可是下面的結(jié)果是粉色的,貌似important并沒有什么卵用
<head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>示例</title> <style> body { color: green !important; } .pink-text { color: pink; } </style></head><body> <h1 class='pink-text'>Hello World!</h1></body>
但是經(jīng)過變化以后,在同一個(gè)class內(nèi)部確實(shí)是最高的,我原本以為無論在哪里,只要加上important就會(huì)是最高的優(yōu)先級(jí),結(jié)果并不是這樣
<head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>示例</title> <style> .pink-text { color: green !important; color: pink; } </style></head><body> <h1 class='pink-text'>Hello World!</h1></body>
問題解答
回答1:你的文字是在 pink-text 上的,一旦 pink-text 設(shè)定了 color,color 值就不是繼承,就沒 body 什么事
回答2:!important這個(gè)屬性不會(huì)被繼承
就是說你給body的字體顏色設(shè)置了!important,
如果子元素沒有設(shè)置其他字體顏色,就會(huì)繼承 body的顏色,但是這個(gè)繼承跟!important沒有關(guān)系。
如果子元素設(shè)置了其他字體顏色,就會(huì)以設(shè)置的字體顏色來顯示。
回答3:謝邀!
!important 提升的是指定樣式規(guī)則應(yīng)用優(yōu)先級(jí),關(guān)鍵在于指定二字,好好感受一下。
而對(duì)于你前者的示例很明顯不屬于這個(gè)范圍內(nèi)。
另:
color: green !important;color: pink;
這種寫法在IE6是無效的。
相關(guān)文章:
1. javascript - 有什么比較好的網(wǎng)頁版shell前端組件?2. sql語句 - mysql中關(guān)聯(lián)表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?4. css - div外層有一圈白色5. javascript - [js]為什么畫布里不出現(xiàn)圖片呢?在線等6. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風(fēng)格檢查怎么辦。。。7. javascript - 如何將一個(gè)div始終固定在某個(gè)位置;無論屏幕和分辨率怎么變化;div位置始終不變8. html - vue項(xiàng)目中用到了elementUI問題9. javascript - iframe 為什么加載網(wǎng)頁的時(shí)候滾動(dòng)條這樣顯示?10. javascript - 求解答:實(shí)例對(duì)象調(diào)用constructor,此時(shí)constructor內(nèi)的this的指向?
