Odin项目按钮背景色及:hover、:active状态异常问题求助

问题根源与修复步骤 #

• 按钮出现白色背景、.btn样式不生效：HTML中按钮的class属性写法错误，用了逗号分隔类名（class="btn, btnbox"），正确的类名分隔应该用空格，逗号会被当作类名的一部分，导致.btn选择器无法匹配元素。
• CSS语法错误导致状态样式失效：button选择器后面多了一个多余的闭合大括号}，这会让浏览器解析CSS时出错，后续的.btn:hover、.btn:active等样式无法被正确识别。

修正后的代码 #

CSS代码

button{
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  /* background-color: var(--secondary-dark); */
}
.btncontainer{
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
}
.btn{
  border-radius: 10px;
  background-color: var(--secondary-dark);
}
.btnbox{
  width: 160px;
  height: 160px;
}
.sign{
  font-size: 80px;
  margin-bottom: 10px;
}
.btn:hover{
  background-color: var(--secondary-dark-active);
}
.btn:active{
  background-color: var(--secondary-dark-active);
}

HTML代码

<div class="btncontainer">
  <button class="btn btnbox" id="rockbtn"><div class="sign">✊</div></button>     
  <button class="btn btnbox" id="scsrbtn"><div class="sign">✌</div></button>
  <button class="btn btnbox" id="pprbtn"><div class="sign">✋</div></button>
</div>

额外说明 #

• 确保CSS中定义了--secondary-dark和--secondary-dark-active这两个自定义属性，否则背景色不会显示预期效果。
• 去掉多余的大括号后，浏览器能正确解析所有CSS规则，包括:hover和:active状态的样式。

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