模糊除了div之外的BODY元素

Question

我试图模糊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（＆＃34;＃dont-blur-this＆＃34;），以及它的所有孩子（递归地）不会受到影响来自这堂课。所以，它不会变得模糊。

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

Answer 1

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