微信小程序样式-class类选择器的使用教程

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/85839311

类选择器语法
在 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; 
}

效果如下图