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

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

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

reply all(3)
左手右手慢动作
左手右手慢动作2017-05-16 13:26:45 3 floor

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

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-05-16 13:26:45 2 floor

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

Like +0
Add Reply
世界只因有你
世界只因有你2017-05-16 13:26:45 1 floor

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.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！