点击头部菜单激活时模糊网站主背景的CSS实现问题

你写的.ct-active .site-main是后代选择器，它只会匹配.ct-active元素内部的.site-main子元素。但实际DOM结构里，网站主背景.site-main并非激活菜单的子元素（菜单属于头部导航，主背景是页面主体，两者是同级或不同父级关系），所以这个选择器无法找到目标元素，自然不会生效。

下面提供几种可行的解决方案：

方案1：使用CSS :has() 选择器（推荐，现代浏览器支持） #

这个选择器可以直接检测页面中是否存在.ct-active元素，只要存在就给.site-main添加模糊效果，无需关心两者的DOM层级关系：

body:has(.ct-active) .site-main {
    filter: blur(5px);
}

直接将这段代码粘贴到WordPress定制器的附加CSS区域即可。

方案2：兼容性更好的JS+CSS方案（适配旧版浏览器） #

如果需要兼容不支持:has()的旧浏览器（如IE），可以通过JavaScript给body添加/移除类，再通过该类控制模糊效果：

1. 添加以下JavaScript代码到WordPress的自定义JS区域（或通过主题functions.php用wp_enqueue_script引入）：

// 替换.menu-toggle为你实际的菜单触发按钮类名
const menuToggle = document.querySelector('.menu-toggle');
const body = document.body;

if (menuToggle) {
  menuToggle.addEventListener('click', () => {
    body.classList.toggle('menu-active');
  });
}

2. 在附加CSS中添加：

body.menu-active .site-main {
    filter: blur(5px);
}

方案3：根据实际DOM层级调整选择器 #

如果你清楚.ct-active和.site-main的具体DOM结构，可以直接用同级选择器：

• 若两者是直接相邻的同级元素：

.ct-active + .site-main {
    filter: blur(5px);
}

• 若两者是非直接相邻的同级元素（中间有其他元素）：

.ct-active ~ .site-main {
    filter: blur(5px);
}

• 若.ct-active在某个父容器内，.site-main是该父容器的兄弟元素：

.parent-container:has(.ct-active) ~ .site-main {
    filter: blur(5px);
}

（将.parent-container替换为实际的父容器类名）

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