问题遇到的现象和发生背景
在给父元素添加！important后，子元素修改属性，却显示的不是从父元素继承下来的，因为考虑到！important的出现，误以为会继承父元素的属性
代码片段
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
font-size: 30px;
color: #000;
}
.box {
color: red !important;
margin: 0 auto;
text-align: center;
}
span {
color: blue !important;
position: relative;
margin: 0 auto;
font-size: 25px !important;
}
#s1 i {
color: pink;
font-size: 20px
}
.box .s1 .s2 {
color: green;
}
</style>
</head>
<body>
<div class="box">我是div标签
<span id="s1">我是span标签
<i class="s2">我是i标签</i>
</span>
</div>
</body>
</html>
运行结果及报错内容
我的解答思路和尝试过的方法
这里搞不懂这个！important的权重不应该是最高的吗 ？
我想要达到的结果
标签里的文字颜色和大小为什么不是25px和蓝色 而是粉色和20px
