微信小程式樣式-class類選擇器的使用教程
阿新 • • 發佈:2019-01-06
類選擇器語法
在 CSS 中,類選擇器以一個點號顯示:
.center {text-align: center}
在上面的例子中,所有擁有 center 類的 HTML 元素均為居中。
在下面的 HTML 程式碼中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 “.center” 選擇器中的規則。
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
注意:類名的第一個字元不能使用數字!
小程式應用
Wxml程式碼
<view class='myclass01'>
<text >普通文字</text>
</view>
<view class='myclass02'>
<text >普通文字</text>
</view>
<view>
<text class='myclass03'>普通文字</text>
</view>
Wxss程式碼
/* 元素選擇器 */ page{ background-color: gainsboro; } view{ background-color: aliceblue; } /* id選擇器 */ .myclass01{ color: red; } .myclass02{ color:purple; } .myclass03{ color:blue; }
效果如下圖