您的位置:首页技术文章
文章详情页

css3 - CSS优先级问题

【字号: 日期:2023-06-21 18:16:43浏览:20作者:猪猪

问题描述

一直在说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是无效的。

标签: CSS
相关文章: