css3 - CSS優先級問題
問題描述
一直在說important的優先級最高,可是下面的結果是粉色的,貌似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>
但是經過變化以后,在同一個class內部確實是最高的,我原本以為無論在哪里,只要加上important就會是最高的優先級,結果并不是這樣
<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 設定了 color,color 值就不是繼承,就沒 body 什么事
回答2:!important這個屬性不會被繼承
就是說你給body的字體顏色設置了!important,
如果子元素沒有設置其他字體顏色,就會繼承 body的顏色,但是這個繼承跟!important沒有關系。
如果子元素設置了其他字體顏色,就會以設置的字體顏色來顯示。
回答3:謝邀!
!important 提升的是指定樣式規則應用優先級,關鍵在于指定二字,好好感受一下。
而對于你前者的示例很明顯不屬于這個范圍內。
另:
color: green !important;color: pink;
這種寫法在IE6是無效的。
相關文章:
1. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處2. javascript - ios返回不執行js怎么解決?3. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題4. 視頻文件不能播放,怎么辦?5. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?6. html5 - HTML代碼中的文字亂碼是怎么回事?7. javascript - 求幫助 , ATOM不顯示界面!!!!8. mysql 查詢身份證號字段值有效的數據9. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示10. javascript - 為什么在谷歌控制臺 輸出1的時候,輸出的1立馬就不見了
