目前的模态对话框是这样实现的:
点击按钮, 在document.body下添加半透明黑色背景和模态对话框

除了这个模态对话框之外页面里还有些其他内容, 比如上图中的那两个article

现在的需求是: 在模态对话框弹出时, 使页面中的其他内容应用-webkit-filter:blur()的CSS属性, 而模态对话框本身不受该样式的影响

问题的关键在于希望开发一个通用的模态对话框函数, 使其在任何页面上都能模糊页面上的其它元素(除了模态对话框本身).

除了写JS, 有没有什么简单的办法来达到这个(选择器的)效果呢?

已经解决 感谢回答者提供的关于CSS选择器的思路

//apply animation setTimeout(function(){ //选择document.body下所有非.shade class的第一级元素 var others = document.querySelectorAll('body > *:not(.shade)'); //遍历nodeList, 如果该元素不是script, 则给该元素添加滤镜 [].forEach.call(others, function(elem){ if(elem.nodeName != 'SCRIPT'){ elem.style.webkitFilter = 'blur(6px)'; } }) //模态对话框本身的动画效果 prompt.style.opacity = 1; prompt.style.padding = 0; }, 50);

模态对话框的移除也类似, 只不过这次模态对话框已经被移除, 所以直接选择document.body下的第一级元素就好

function modualRemoval(){ document.body.removeChild(shade); var others = document.querySelectorAll('body > *'); [].forEach.call(others, function(elem){ if(elem.nodeName != 'SCRIPT'){ //去除模糊效果 elem.style.webkitFilter = ''; } }); }