类选择器允许以一种独立于文档小白教程网元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档小白教程网后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

1.基础语法

在 CSS 中，类选择器以一个点号显示，代码示例

小白教程网www.2d5.net

.center {text-align: center}  /* 定义名称为center的样式，可供class类选择器调用 */

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 类选择器中的规则，代码示例

小白教程网www.2d5.net

<h1>  <!—class类选择器：应用样式名为center的样式-->
     This heading will be center-aligned
</h1>
<p>  <!—class类选择器：应用样式名为center的样式-->
     This paragraph will also be center-aligned.
</p>

注意：类名的第一个字符不能使用数字！

2.小程序应用

下面举例说明在微信小程序中如何定义3行不同颜色的文本。

微信小程序中的view组件相当于div是块级元素，我们在写小程序里面的布局的时候；我们可以将view当做是div来操作；每个view自成一行；小程序中的text组件是行内元素，可以理解为类似span元素；如果将3个文本text放在同一个view里面，则都显示在同一行。定义在view组件里面的text文本颜色会继承view的颜色；如果view组件内的text重新定义了颜色样式，会覆盖view组件里面定义的颜色。

.wxml文件代码示例

小白教程网www.2d5.net

<view><!—view是块级元素，显示为一行-->
    <text>普通文本</text><!—text是行内元素，多个text都是显示在一行-->
</view>
<view>
    <text >普通文本</text>
</view>
<view>
    <text  class='myclass03'>普通文本</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

/* 元素选择器 */
page{
  background-color:  gainsboro;
}
view{
 background-color:  aliceblue;
}
/* id选择器 */
.myclass01{
  color: red; /* 字体为红色 */
}
.myclass02{
  color:purple; /* 字体为紫色 */
}
.myclass03{
  color:blue;   /* 字体为蓝色 */
}

效果如图3-4所示。