如何仅用CSS实现除目标div外页面主体模糊？代码点击后仍失效

我来帮你搞定这个模糊效果的问题！你的代码有两个关键问题导致效果不生效，咱们一步步来修正：

问题分析 #

1. 缺少目标元素：你写了<a href="#test">test</a>，但页面里没有id="test"的元素，:target选择器根本找不到要定位的目标，自然不会触发预期的样式。
2. :not(:target)的使用逻辑错误：你给所有:not(:target)的元素加模糊，但<body>、<html>这些父级元素也属于:not(:target)，它们的滤镜会作用于所有子元素——哪怕子元素是目标元素，也会被父级的模糊滤镜影响，因为父级的滤镜是对整个元素及其内容生效的，子元素单独设置filter: none也无法抵消。

正确实现方案 #

我们换个思路：当目标元素被激活（成为:target）时，给页面其他内容添加模糊，同时让目标元素保持清晰且显示在最上层。

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <style>
    /* 页面通用样式，可选 */
    .page-content {
      padding: 2rem;
      transition: filter 0.3s ease; /* 添加过渡动画更自然 */
    }

    /* 默认隐藏目标元素 */
    #test {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2rem;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      z-index: 100; /* 确保目标元素在模糊内容之上 */
    }

    /* 当目标元素成为target时，模糊页面内容并显示目标元素 */
    #test:target {
      display: block;
    }
    #test:target ~ .page-content {
      filter: blur(5px);
    }
  </style>
</head>
<body>
  <div id="test">
    这是清晰的目标元素！<br>
    <a href="#">关闭</a>
  </div>

  <div class="page-content">
    <h1>页面主体内容</h1>
    <p>这是会被模糊的普通内容...</p>
    <a href="#test">点击显示清晰的目标元素</a>
  </div>
</body>
</html>

代码说明 #

• 结构调整：把页面主体内容放在.page-content容器里，目标元素#test和它同级，这样可以通过兄弟选择器~来控制主体内容的模糊。
• 目标元素默认隐藏：通过display: none默认隐藏，当点击锚点后，:target选择器触发，将其设置为display: block显示。
• 模糊控制：当#test成为:target时，给同级的.page-content添加模糊滤镜，而目标元素本身不受影响，同时通过z-index确保它在模糊内容之上。
• 过渡动画：添加transition属性让模糊效果更平滑，提升用户体验。

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