无论如何，孩子都会继承父母的CSS

Question

我一直坚持这个问题很长一段时间了。这是代码：

    <div class="upper-half-container jumbotron d-flex align-items-center" 
    style="background-image: url('${mediaInfo.backdrop}');">
        <div class="container">
            <div class="media">
            ..................
            </div>
        </div>
   </div>

我试图给背景图像一个模糊效果，同时防止CSS影响内部div。这是CSS：

.upper-half-container {
    background-size: cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}


.container {
    -webkit-filter: none !important;
}

无论如何都会继承CSS。我不明白这里发生了什么。我也尝试了 all：revert 和 all：initial 属性。谁能告诉我哪里可能出错了？

谢谢！