HTML/CSS中如何给多层div应用模糊滤镜且不模糊内部p标签

你最初的写法无法生效的核心逻辑：filter属性作用于元素时，会直接对该元素及其所有后代的整体渲染结果执行滤镜处理，该效果不属于可被子元素覆盖的继承属性。一旦父元素应用blur()，内部所有内容会被统一做模糊计算，子元素单独设置filter:blur(0)无法抵消父级已经完成渲染的模糊效果。同时你使用的div通配选择器会选中所有层级的div元素，连最内层包裹p标签的div也会被加上模糊，进一步导致p标签无法保持清晰。

不要直接给嵌套的div父链加filter，改用「独立模糊层+同级清晰内容」的定位分层方案即可，不需要破坏原有多层div的展示效果：

代码示例 #

调整后的DOM结构，把需要模糊的嵌套div和需要清晰显示的p标签放到同一个定位上下文下：

<div class="outer-box">
  <!-- 所有需要模糊的嵌套div统一放到单独的模糊包裹层里 -->
  <div class="blur-layer">
    <div>
      <div>
        <div></div>
      </div>
    </div>
  </div>
  <!-- 需要清晰显示的p标签和模糊层同级，靠定位叠到对应位置 -->
  <p>text</p>
</div>

对应CSS代码：

.outer-box {
  position: relative;
  width: 400px;
  height: 300px;
  /* 按实际需求设置容器尺寸 */
}

/* 模糊层铺满容器，仅对该层应用blur，不会影响同级的p标签 */
.blur-layer {
  position: absolute;
  inset: 0;
  filter: blur(5px);
  background: #f0f0f0;
  /* 此处背景仅作效果演示，替换为实际业务中div的样式即可 */
}

/* p标签定位到目标位置，层级高于模糊层，完全不受模糊影响 */
.outer-box p {
  position: absolute;
  /* 按需求调整位置，示例为居中对齐，对应最内层div的位置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 99;
}

备选方案（兼容性略差）：如果不想调整原有DOM结构，可以用backdrop-filter实现：给最外层div设置相对定位，通过::before伪元素生成绝对定位铺满容器的层，给伪元素设置backdrop-filter: blur(5px)，同时给p标签设置更高的z-index保证其在伪元素上层即可。注意该方案下伪元素不能覆盖p标签，否则p标签也会被模糊。

内容的提问来源于stack exchange，提问作者Sajjad