WXSS 模板样式- 全局样式和局部样式

WXSS 模板样式- 全局样式和局部样式

WXSS（WeChat Style Sheets）是一种样式语言，用于定义小程序中的样式。在WXSS中，存在两种类型的样式：全局样式和局部样式。

全局样式

全局样式是定义在 app.wxss文件中的样式，作用于每一个页面。全局样式可以在整个小程序中使用，但是当页面层级很深时，可能出现样式冲突的问题。

以下是一个全局样式的示例代码：

view {
  padding: 10rpx;
  margin: 10rpx;
  background-color: lightskyblue;
}

view:nth-child(1) {
  background-color: lightskyblue;
}

局部样式

局部样式是在页面的 .wxss 文件中定义的样式，只作用于当前页面。局部样式可以覆盖全局样式。

以下是一个局部样式的示例代码：

view {
  background-color: lightpink;
}

需要注意的是：

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

以下是一个权重的示例代码：

view {
  padding: 10rpx;
}

view {
  padding: 20rpx !important;
}

在上述代码中，第二个样式的权重大于第一个样式的权重，使用了 !important 标志，所以会覆盖第一个样式的设置。

总结

小程序中的样式使用WXSS语言编写。全局样式和局部样式是两种常见的样式类型，二者具有不同的作用范围和权重。在使用WXSS编写样式时，需要考虑样式的作用范围和权重关系，以避免造成样式冲突问题。

运行效果