模糊除 div 以外的 BODY 元素答案

【问题标题】：Bluring BODY element except div模糊除 div 以外的 BODY 元素
【发布时间】：2023-04-01 08:06:01
【问题描述】：

我正在尝试模糊 BODY 中的所有元素，除了特定的 div。

所以，我做了这个类（CSS + LESS）：

.blur {

    *, a.blur, a.blur:hover, a.blur:focus, h1 {
        color: transparent !important;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

    img {
        -webkit-filter: blur(3px) !important;
        -moz-filter: blur(3px) !important;
        -o-filter: blur(3px) !important;
        -ms-filter: blur(3px) !important;
        filter: blur(3px) !important;
    }

    div {
        opacity: 0.7 !important;
    }
}

这个类在调用这个js代码时模糊了body上的所有元素：

$("body").addClass("blur");

我的问题是我想要一个特定的 div ("#dont-blur-this") ，以及它的所有子项（递归）都不会受到这个类的影响。所以，它不会是模糊的。

这可能吗？对于这种情况，您有什么棘手的解决方案吗？

【问题讨论】：

在任何地方使用!important 并不是一个好习惯。您应该能够在没有它的情况下进行管理 + 您共享的代码应该只模糊 body.blur 中包含的图像（尽管您可能只有图像）。你也应该分享你的 HTML 标记，小提琴会很棒

标签： javascript jquery html css less

【解决方案1】：

有:not(#dont-blur-me-bro) 选项，但您需要小心选择。或者，您可以稍后在级联中使用 !important 来重置较早的模糊属性。

【讨论】：