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. node.js - vue-cli构建报错。。。生成不了模板，求解~！！2. javascript - ajax中的 textStatus 报错为 parsererror？3. javascript - js 做上传头像，怎么把图片传到服务器4. 在微信浏览器中使用iframe，android会出现空白，ios会跳转，怎么阻止这些？5. javascript - 求助canvas绘制半透明的马赛克？6. javascript - vue.js插件中的全局方法，全局资源和实例方法区别是什么？7. 微信端电子书翻页效果8. java - Spring如何在启动时，针对特定的一类bean根据传入的参数创建出不同的实例并且在后续的业务中调用这些实例？9. python 读取csv文件可以读取但内容错误，但单独用excel打开正常，如何解决？10. javascript - angular.js 中的双花括号{{}}问题
网公网安备