1. 程式人生 > >微信小程式樣式-class類選擇器的使用教程

微信小程式樣式-class類選擇器的使用教程

類選擇器語法
在 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; 
}

效果如下圖
微信小城中class類選擇器的使用