关于！important的权重问题。

问题遇到的现象和发生背景

在给父元素添加！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>
运行结果及报错内容

img

我的解答思路和尝试过的方法

这里搞不懂这个！important的权重不应该是最高的吗 ？

我想要达到的结果

标签里的文字颜色和大小为什么不是25px和蓝色 而是粉色和20px

因为 color font-size 你自己设置了值，会优先使用自己的值 如果 是inherit 或者自己不写值才会去继承的父级。
!important确实权重最高的 但是 它只是作用于你设置的当前元素 不影响其他元素

自身的样式会覆盖继承来的父元素的样式