如何使用原生JavaScript和CSS实现点击Body时为除指定a标签外的所有元素应用样式

你的需求很明确：点击页面Body区域时，给Body下除了带有except-me类的a标签之外的所有子元素切换样式，用原生JS和CSS实现，不依赖jQuery。咱们来拆解问题，看看怎么修正才能达到预期效果：

你原有代码的问题分析 #

你写的CSS选择器body >*:not(.except-me).active逻辑有偏差——你是给Body元素添加/移除active类，而不是给子元素加这个类，所以这个选择器无法匹配到正确的目标元素。

正确的实现方案 #

1. CSS 样式代码

/* Body基础样式 */
body {
  padding: 20px;
  background-color: #f5f5f5;
}
/* 给section添加默认样式方便直观测试 */
section {
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}
/* 核心规则：当Body拥有active类时，选中所有直接子元素并排除except-me元素 */
body.active > *:not(.except-me) {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

2. JavaScript 交互代码

// 获取Body元素（用querySelector比getElementsByTagName更简洁）
const bodyElement = document.querySelector('body');

// 给Body绑定点击事件，切换active类
bodyElement.addEventListener('click', () => {
  bodyElement.classList.toggle('active');
});

代码逻辑说明 #

• CSS部分的body.active > *:not(.except-me)：意思是当Body元素带有active类时，选中它的所有直接子元素（>表示仅匹配直接子节点），然后排除掉带有except-me类的元素（:not(.except-me)），最终给这些符合条件的元素应用样式。
• JS部分通过点击事件切换Body的active类，触发CSS的样式变化，实现点击切换的效果。

这样点击Body区域时，两个section元素会切换样式，而带except-me类的a标签完全不受影响，正好满足你的核心需求。

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