添加前置元素后圣诞树Div消失，仅星星保留的问题求助

你给.tree设置宽高的样式依赖了:first-child伪类：

.tree:first-child {
  height: 400px;
  width: 325px;
}

这个选择器仅会匹配父元素的第一个子元素且带有.tree类的元素。当你在.tree前添加button等元素后，.tree不再是body的第一个子元素，该样式直接失效。失去宽高的flex容器（.tree）无法支撑内部leaves和wood元素的展示，只有单独设置了width的star能正常显示。

方案一：直接将宽高样式绑定到.tree类 #

把原来的:first-child伪类去掉，将宽高属性直接写入.tree的基础样式：

.tree {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: loadIn 2s;
  transform-origin: bottom;
  height: 400px; /* 新增宽高 */
  width: 325px;
}

/* 删除原有的.tree:first-child规则 */

方案二：给目标树添加专属类（适用于多tree场景） #

如果页面存在多个.tree元素，不想让所有tree都应用这个宽高，可以给目标树额外加一个专属类：

.tree.main-tree {
  height: 400px;
  width: 325px;
}

对应的HTML修改：

<div class="tree main-tree">
  <!-- 内部结构保持不变 -->
</div>

两种方案都能确保无论.tree前是否有其他元素，核心样式都能正确应用，圣诞树即可正常显示。

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