search

Home  >  Q&A  >  body text

css3 - CSS priority issue

I keep saying that important has the highest priority, but the result below is pink. It seems that important has no effect

<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>

But after the change, it is indeed the highest within the same class. I originally thought that no matter where it is, as long as important is added, it will have the highest priority, but the result is not like this

<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>
迷茫迷茫2781 days ago797

reply all(3)I'll reply

  • ringa_lee

    ringa_lee2017-05-16 13:26:45

    Your text is on pink-text. Once pink-text sets color, the color value is not inherited, and there is nothing wrong with body

    reply
    0
  • 天蓬老师

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

    !important this property will not be inherited

    That is to say, you have set the font color of the body! important,

    If the child element does not set other font colors, it will inherit the color of the body, but this inheritance has nothing to do with !important.

    If a child element is set to another font color, it will be displayed in the set font color.

    reply
    0
  • 世界只因有你

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

    Thanks for the invitation!

    !important What has been improved is the application priority of specified style rules. The key lies in the word specify, feel it carefully.

    But your former example obviously does not fall within this scope.

    Another: 

    color: green !important;
color: pink;

    This way of writing is invalid in IE6.

    reply
    0
  • Cancelreply