搜索

首页  >  问答  >  正文

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>
迷茫迷茫2747 天前763

全部回复(3)我来回复

  • ringa_lee

    ringa_lee2017-05-16 13:26:45

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

    回复
    0
  • 天蓬老师

    天蓬老师2017-05-16 13:26:45

    !important这个属性不会被继承

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

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

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

    回复
    0
  • 世界只因有你

    世界只因有你2017-05-16 13:26:45

    谢邀!

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

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

    另:

    color: green !important;
    color: pink;

    这种写法在IE6是无效的。

    回复
    0
  • 取消回复