点击night按钮时class=css元素样式不生效问题咨询

你遇到的问题主要有两个核心原因：

1. querySelector仅匹配第一个元素：
   你用document.querySelector('.css')只能选中页面里第一个带有css类的元素（也就是<span id="first" class="css">CSS</span>），后面其他的<span class="css">元素根本没被选中，自然不会跟着变色。

2. 样式被后续代码覆盖：
   就算第一个.css元素被设置成了白色，紧接着你又用document.querySelector('#first').style.color = 'orange'把它的颜色改成了橙色——因为#first就是那个第一个.css元素，所以它的颜色被覆盖，看起来就像.css的样式完全没生效。

把querySelector换成querySelectorAll，这样就能选中所有带css类的元素，再遍历它们统一设置颜色；同时根据你的需求调整代码逻辑，避免样式被重复覆盖。

修改后的按钮代码如下：

<input type="button" value="night" onclick= "
  document.querySelector('body').style.backgroundColor = 'darkblue';
  document.querySelector('body').style.color = 'yellow';
  // 选中所有.css元素并遍历设置白色
  document.querySelectorAll('.css').forEach(el => el.style.color = 'white');
  // 如果不需要#first单独变橙色，就删掉下面这行
  document.querySelector('#first').style.color = 'orange';
">
<input type="button" value="day" onclick ="
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  // 遍历恢复所有.css元素的粉色
  document.querySelectorAll('.css').forEach(el => el.style.color = 'pink');
  document.querySelector('#first').style.color = 'lightblue';
">

额外提示： #

• 如果你的需求是所有.css类的元素都变成白色（包括#first），直接删掉document.querySelector('#first').style.color = 'orange'这一行即可，避免样式冲突。
• querySelectorAll返回的是NodeList，现代浏览器都支持用forEach遍历；如果要兼容旧浏览器，也可以用普通for循环来遍历元素集合。

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