javascript - 除div外的BODY元素模糊

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

所以，我上了这个课（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").addClass("blur");

我的问题是我想要一个特定的div（“＃dont-blur-this”），以及它的所有子元素（递归）都不会受到此类的影响。因此，它不会模糊。

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

最佳答案

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

关于javascript - 除div外的BODY元素模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26560908/