在 W3C 标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档小白教程网树中该元素类型的每一个实例。在网页开发中，我们所说的元素选择器可以理解为HTML的元素，在微信小程序中我们所说的元素选择器可以理解为微信小程序中的组件。

1.基础语法

最常见的CSS选择器是元素选择器。换句话说，文档小白教程网的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是HTML本身，代码示例

小白教程网www.2d5.net

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

可以将某个样式从一个元素切换到另一个元素。

假设你决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p，代码示例

小白教程网www.2d5.net

html {color:black;}

p {color:gray;}

h2 {color:silver;}

2.小程序应用

微信小程序中，我们可以把每个组件当作一个元素；比如小程序中常用的view组件和text组件，我们可以借鉴CSS的使用方式，完整代码如下。

.wxml文件代码示例

小白教程网www.2d5.net

<view>
  <text>文本</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

/* 元素选择器 */
page{ 
  background-color:  gainsboro; /* page表示整个页面 */
}
view{
 background-color:  aliceblue; /* 定义整个view的背景颜色 */
}
text{
  background-color:  burlywood; color: red; /* 定义text的背景颜色和字体颜色 */
}

我们给view加一个背景颜色，给text也增加一个背景颜色和红色文字；效果如图3-1所示。