当前阅读教程:微信小程序设计教程 > 元素选择器 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 小程序样式基础 | 下一篇: ID选择器 |
在 W3C 标准中,元素选择器又称为类型选择器(type selector)。类型选择器匹配文档HTML 树中该元素类型的每一个实例。在网页开发中,我们所说的元素选择器可以理解为的元素,在微信小程序中我们所说的元素选择器可以理解为微信小程序中的组件。 1.基础语法最常见的CSS选择器是元素选择器。换句话说,文档 的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是HTML本身,代码示例 如下: html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某个样式从一个元素切换到另一个元素。 假设你决定将上面的段落文本(而不是 h1 元素)设置为灰色。只需要把 h1 选择器改为 p,代码示例 如下: html {color:black;} p {color:gray;} h2 {color:silver;} 2.小程序应用微信小程序中,我们可以把每个组件当作一个元素;比如小程序中常用的view组件和text组件,我们可以借鉴CSS的使用方式,完整代码如下。 .wxml文件代码示例 如下: <view> <text>文本</text> </view> .wxss文件代码示例 如下: /* 元素选择器 */ page{ background-color: gainsboro; /* page表示整个页面 */ } view{ background-color: aliceblue; /* 定义整个view的背景颜色 */ } text{ background-color: burlywood; color: red; /* 定义text的背景颜色和字体颜色 */ } 我们给view加一个背景颜色,给text也增加一个背景颜色和红色文字;效果如图3-1所示。 |
|
上一篇: 小程序样式基础 | 下一篇: ID选择器 |