wxml
1 <view class='weui-loading'>#000</view>
2
3 <view class='btn'><text class='green'>前面</text>#000</view>
css
/* 說說偽元素::before和::after,也許你會更加清晰 */ .weui-loading { position: relative; display: block; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; box-sizing: border-box; font-size: 18px; text-align: center; color: #000; text-decoration: none; line-height: 2.55555556; border-radius: 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;
}
/* 為了兼容低版本,使用:before */ .weui-loading:before {
} .weui-loading::before { content: '前面'; color: #179b16;
}
/* 為了兼容低版本,使用:after */ .weui-loading:after {
} .weui-loading::after {
/* 如果content,也就是內容不連接的話,那么content就不會起作用 */ content: '后面'; color: #ec350c; border: 1px solid #ddd; width: 200%; height: 200%; position: absolute; top: 0; left: 0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px;
} .btn { color: #000; width: 180rpx; text-align: center; padding: 2%; border-radius: 5px; border: 1px solid #ddd; margin-top: 1%;
} .btn .green{ color: #179b16;
}
如果需要設置一個樣式前面的文字是綠色，中間的字體是黑色，而后面的字體是紅色，我們怕是要寫多少樣式了.