简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3 - CSS优先级问题
迷茫
迷茫 2017-05-16 13:24:45
0
3
745

一直在说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>
迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(3)
左手右手慢动作
左手右手慢动作2017-05-16 13:26:45 3 楼

你的文字是在 pink-text 上的，一旦 pink-text 设定了 color，color 值就不是继承，就没 body 什么事

点赞 +0
添加回复
Peter_Zhu
Peter_Zhu2017-05-16 13:26:45 2 楼

!important这个属性不会被继承

就是说你给body的字体颜色设置了!important，

如果子元素没有设置其他字体颜色，就会继承 body的颜色，但是这个继承跟!important没有关系。

如果子元素设置了其他字体颜色，就会以设置的字体颜色来显示。

点赞 +0
添加回复
世界只因有你
世界只因有你2017-05-16 13:26:45 1 楼

谢邀！

!important 提升的是指定样式规则应用优先级，关键在于指定二字，好好感受一下。

而对于你前者的示例很明显不属于这个范围内。

另：

color: green !important;
color: pink;

这种写法在IE6是无效的。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！