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. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?2. docker api 开发的端口怎么获取?3. docker镜像push报错4. PHP中的$this代表当前的类还是方法?5. macos - mac下docker如何设置代理6. 如何解决Centos下Docker服务启动无响应,且输入docker命令无响应?7. 老师,flex-shrink: 1; 按视频操作,不会自动缩放8. 前端 - 类到底该如何去命名 .newsList 这种的命名难道真的不是过度语义化吗?~9. sublime-text - sublime text 3中编译python(sublimeREPL),如何仅运行单行/选定部分10. android glide asbitmap 在baseadpter中的问题

网公网安备