详解WXSS中样式选择器的优先级及使用

详解WXSS中样式选择器的优先级及使用

整体而言，WXSS 是自顶向下，自左向右执行的，即对于同一种选择器获取的页面元素，其最终应用的样式是后定义的样式覆盖前面定义的同名样式。但对于不同类型的选择器，该规则并不适用。本篇经验将基于第一个手工构建的微信小程序演示，具体构建步骤，可以参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

在小程序页面对应的 wxml 文件中，为 标签定义一个 id 属性和 class 属性。

演示类选择器的优先级高于元素选择器的优先级

在 wxss 中，通过类选择器和元素选择器为 wxml 中的 view 组件设置同样的样式，并且类选择器的样式定义在前；保存编译后，模拟器显示类选择定义的样式生效。

演示ID选择器的优先级高于类选择器的优先级

在 wxss 中，通过ID选择器和类选择器为 wxml 中的 view 组件设置同样的样式，并且ID选择器的样式定义在前；保存编译后，模拟器显示ID选择定义的样式生效。

演示内联样式的优先级高于类选择器的优先级

保持 wxss 文件内容不变，在 wxml 中，通过内联样式（即元素的 style 属性）为 页面 view 组件设置样式，保存编译后，模拟器显示通过内联样式定义的样式生效。

演示添加 !important 标识后的样式优先级最高

保持 wxml 内容不变，在 wxss 中的类选择器定义的样式后面添加 !important 标识，保存编译，模拟器即显示通过该类选择器定义的样式生效。