微信小程序手机预览子组件不显示背景颜色

Question

微信小程序手机预览子组件不显示背景颜色，模拟器显示正常

<!--pages/login/login.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/* pages/login/login.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1) {
  background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

模拟器显示：

手机预览：
https://img-mid.csdnimg.cn/release/static/image/mid/ask/fca2a7548cc0441584129f658c4a3674.jpeg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

根据您提供的代码和问题描述，您在微信小程序中设置了子组件的背景颜色，但是在手机预览时背景颜色没有显示。这种情况通常是由于样式层叠、选择器优先级或样式生效范围的问题导致的。

首先，请确保您在全局.wxss文件中没有对view组件设置背景颜色或者设置了!important样式覆盖了当前的背景颜色。

针对您给出的代码，看起来是没有明显问题的，理论上应该能正确显示背景色。您可以尝试以下排查步骤：

1. 清除缓存并重新编译：在开发者工具中点击“详情” -> “清除缓存”，然后重新编译预览。
2. 检查是否父元素有设置背景色，导致子元素背景色被遮挡。
3. 确保对应的wxss文件已正确关联到对应的wxml文件，没有引用错误。
4. 尝试在子view上直接设置背景颜色，不使用:nth-child 选择器，看是否可以正常显示。

如果以上步骤都无法解决问题，请检查您的微信开发者工具版本，并尝试更新到最新版。另外，在手机预览时，确认一下真机和模拟器的操作系统以及微信版本是否存在差异，有可能是兼容性问题导致的。