JavaScript按钮修改li文字颜色为黑色失效，求排查解决

原代码 #

HTML代码 #

<h2>Sonnenfarben</h2>
<div class="box">
   
  <ul type="circle" class="liste2">
    <li class="farbeRot">rot</li>
    <li class="farbeOrange">orange</li>
    <li class="farbeGelb">gelb</li>
  </ul>
  
  <button onclick="changeColor()">Lights out</button>

  <ol class="liste3" start="3">
      <li class="farbeBraun">braun</li>
      <li class="farbeGrau">grau</li>
  </ol>
</div>

CSS代码 #

.farbeRot{
  color: ;
  font-weight: bold;
}

.farbeOrange{
  color: orange;
  font-style: italic;
}

.farbeGelb{
  color: yellow;
}

.farbeBraun{
  color: brown;
  font-style: italic;
}

.farbeGrau{
  color: grey;
  font-weight: bold;
}

.box{
  color: black;
}

JavaScript代码 #

function changeColor(){
  document.querySelector('.box').style.color = "black";
}

问题原因 #

1. CSS语法错误：.farbeRot的color属性值为空，属于无效CSS规则，会导致该样式无法正常应用，但这不是按钮功能失效的核心原因。
2. CSS优先级冲突：每个
3. 都被设置了独立的类选择器（如.farbeRot、.farbeOrange），这类选择器的优先级高于父元素.box的样式。即使通过JS修改.box的color为黑色，子元素
4. 的类样式会直接覆盖继承来的颜色，因此看不到效果。
5. JavaScript逻辑偏差：当前JS仅修改了父容器.box的行内样式，但行内样式对后代元素的继承优先级依然低于后代元素自身的类选择器样式，无法达到修改
6. 颜色的目的。

解决方案 #

方案一：直接修改所有

的行内样式 #

修改JavaScript代码，直接选中所有

function changeColor(){
  const listItems = document.querySelectorAll('li');
  listItems.forEach(item => {
    item.style.color = "black";
  });
}

行内样式的优先级高于类选择器，会直接覆盖

方案二：利用CSS类叠加（推荐，样式与逻辑分离） #

1. 在CSS中添加一个高优先级的类，用于强制设置黑色：

/* 元素选择器+类选择器的优先级高于单独的类选择器 */
li.black-text {
  color: black;
}

如果担心原有样式优先级过高，可以添加!important（不推荐滥用，但此处场景下可行）：

li.black-text {
  color: black !important;
}

2. 修改JavaScript代码，给所有
3. 添加该类：

function changeColor(){
  const listItems = document.querySelectorAll('li');
  listItems.forEach(item => {
    item.classList.add('black-text');
  });
}

3. 若需要支持点击按钮切换颜色（黑/原颜色），可将JS改为切换类：

function changeColor(){
  const listItems = document.querySelectorAll('li');
  listItems.forEach(item => {
    item.classList.toggle('black-text');
  });
}

额外修复 #

修复CSS中.farbeRot的无效规则，补充初始颜色值：

.farbeRot{
  color: red; /* 补充颜色，比如红色 */
  font-weight: bold;
}

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