HTML+JS+CSS换装游戏初始无默认娃娃、点击切换肤色失效求助

问题原因 #

1. CSS优先级冲突：ID选择器（比如#doll）的优先级远高于类选择器（比如.doll1/.doll2），如果你直接在#doll规则中添加默认背景图，后续通过JS添加的类样式里的背景图会被ID的样式覆盖，导致切换无效。
2. 初始化逻辑缺失：你当前的init函数仅重置了状态变量，没有给页面上的娃娃、前后头发元素设置初始类，所以页面刚加载时这些元素没有背景图，显示为空。

解决方案 #

1. 调整JS初始化逻辑（推荐）

不用修改现有CSS，直接改写init函数，页面加载完成后自动给各元素设置默认类即可，代码如下：

function init() {
  console.log("window has loaded");
  state.a = 0;
  state.b = 0;
  state.c = 0;
  // 设置各元素初始默认样式
  document.getElementById("hairback").setAttribute("class", "hairback1");
  document.getElementById("doll").setAttribute("class", "doll1");
  document.getElementById("hairfront").setAttribute("class", "hairfront1");
}

这样页面加载后默认显示第一个娃娃、第一款前后头发，点击切换按钮时类样式也能正常生效，不会出现优先级冲突。

2. 若要保留ID选择器内的默认背景设置

如果你确实想在#doll等ID规则里加默认背景，需要给对应的类选择器样式添加!important提升优先级，示例：

.doll1 {
  position: absolute;
  width: 1000px;
  height: 1340px;
  background-image: url("../img/doll1.png") !important;
}
.doll2 {
  position: absolute;
  width: 1000px;
  height: 1340px;
  background-image: url("../img/doll2.png") !important;
}

注：该方法不推荐，过多使用!important会提高后续样式维护成本。

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