微信小程序组件默认样式优先级的bug分析

在当前版本(iOS客户端6.3.27，开发工具0.10.101400)中，微信小程序存在wxss中优先级导致的bug。

官方文件中有提及。

您可以使用标签选择器来控制同类组件的样式。例如，使用输入标签选择器来控制输入/的默认样式。

这里有一个明显的bug。小程序中的大多数组件都有默认样式。例如，图像组件有四种默认样式，其中之一是display:内联块。

如果您尝试使用上面提到的标签选择器来设置图像的显示属性，您会发现它是无效的。但是，我们可以从开发人员工具中看到，该设置不会生效，因为图像组件的默认样式优先级高于我们通过标签选择器设置的样式。

经过测试，基本上所有组件的默认样式都比通过标签选择器设置的样式具有更高的优先级，而类选择器和id选择器仍然比默认样式具有更高的优先级。因此，如果您目前想要更改组件的默认样式，则不能直接通过标签选择器进行设置。相反，您应该将同一个类分配给需要更改默认样式的组件，然后通过该类更改默认样式。

这个优先级bug，除了上面提到的所有组件的默认样式之外，对于一些特殊的组件，比如按钮，还有进一步的问题。

按钮组件可以分别设置大小、类型和普通三个属性，以显示不同的按钮样式。测试中发现，如果三个属性使用默认值以外的值，比如type="primary "，那么除了按钮组件的默认样式之外，一个type="primary "的按钮还会有另外两种默认样式，color: #FFFFFF和background-color: #1AAD19。此时，如果通过类选择器将颜色设置为另一个值，就会发现无效。类似地，我们可以从开发人员工具中看到，按钮的两种“额外”默认样式(主类型)优先于类选择器。因此，在这种情况下，上述两种“额外”默认样式只能通过id选择器进行更改。

另外，值得提醒的是。在实际开发中(真机和模拟器)，会发现目前wxss中可以使用级联选择器等等。父母。子{ width : 100%；}

然后，一个更优雅的解决上述错误的方法被导出：

修改容器下所有图像组件的默认样式。容器图像{ display:块；}

更改按钮的额外默认样式。集装箱。btn { color:红色；}

由此我们可以猜测出上述bug的原因，可能是小程序组件默认样式的实现中使用了类似的标签选择器和类选择器，但是优先级没有得到很好的控制。

但是，请注意：不要使用这种方法！不要用这种方法！不要用这种方法！

在官方文件中明确说明

样式表不支持级联选择器。

不建议使用官方文件中明确指出不可用的方法。目前小程序还处于内部测试阶段，这种方法还是可以使用的。只是官方疏忽，很有可能这种方法会突然不可用。

另外，根据微信小程序测试组的消息，级联选择器目前还可以使用，因为级联选择器还没有被过滤掉。级联选择可能会破坏一些基本组件的样式，因此稍后有时间时会添加过滤。建议使用边界元法。同时，稍后可能会添加不会破坏基本组件的级联方法，但这一要求的优先级会更低。