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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Your text is on pink-text. Once pink-text sets color, the color value is not inherited, and there is nothing wrong with body
!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.
Thanks for the invitation!
!importantWhat 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:
This way of writing is invalid in IE6.