行内样式

<view style="color: red;">行内样式</view>

页面样式

编写在当前页面文件夹当中的 WXML 的 WXSS 文件当中:

index.wxss:

.pageStyle {
  color: pink;
}

index.wxml:

<view class="pageStyle">页面样式</view>

全局样式

编写在 app.wxss 文件当中:

.globalStyle {
  color: #f0f;
}

index.wxml:

<view class="globalStyle">全局样式</view>

优先级

分别为:行内样式 > 页面样式 > 全局样式,如果想让其中的某一个样式达到最高可以利用之前 CSS 所学习的 !important 来实现。

行内样式 > 页面样式 > 全局样式:

<view style="color: red;" class="pageStyle globalStyle">行内样式</view>

页面样式 > 全局样式:

<view class="pageStyle globalStyle">页面样式</view>

!important:

.globalStyle {
  color: #f0f !important;
}

微信小程序-WXSS的书写格式_微信小程序