wxss 本节目标
- 了解小程序支持的选择器类型
- 了解小程序各选择器的优先级
- 学会计算简单的优先级
(一) 选择器
| 类型 | 选择器 | 样例 | 样例描述 |
|---|---|---|---|
| 类选择器 | .class | .info | 选择所有拥有 class=”info”的组件 |
| id 选择器 | #id | #firstname | 选择拥有 id=”firstname”的组件 |
| Tag 选择器 | element | view | 选择所有 view 组件 |
| 元素选择器 | element,element | view | 选择所有 view 组件 |
| 伪元素选择器 | ::after | view::after | 在 view 组件后边插入内容 |
| 伪元素选择器 | ::before | view::before | 在 view 组件前边插入内容 |
wxss 不支持级联选择器比如:nth-of-type(1) 之类的
(二) 选择器的用法
- 标签内样式:动态样式，如特定场景下的属性设置
- ID 选择器: 针对某个特定组件进行属性的设定
- 类选择器: 针对某一类组件进行属性的设定
- 标签选择器: 对全局某一个标签的设定
(三) 选择器的权重
标签选择器<类选择器 < id 选择器 < 内联样式 < !important
- 相同权重以后面出现的选择器为准
(四) 盒子模型 flex
父元素
- 父元素必须写上 display:flex
- flex-flow: row nowrap
从左到右横向排列，不允许换行 - justify-content:center; (横向)横向居中 flex-start(左边) flex-end(右边)
space-between 相同的距离排布 space-around 两侧还会留白 - align-items:纵向排列 center 纵向居中
子元素
- order:项目的排列顺序项目越小越靠前
- flex: 0 0 300px 第一个参数表示放大倍数，第二个参数表示缩小倍数，第三个参数表示最小多少
- align-self: center 每一个自己排列
(五) 内联样式
- 接收动态样式，在运行点的时候会进行解析，用于控制样式的调整
- 定义单一元素，或使用中发生较大变化的元素
<view style=" color:{{color}};"></view>(六) 小程序响应式和小程序样式的导入
rpx 尺寸单位,可以适应不同宽度的屏幕，规定屏幕为 750rpx
rpx 在各个尺寸下都能适配
wxss 使用@import 语句来导入样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
APP.wxss 定义了全局样式，会应用到所有的页面上
Page.wxss 定义了页面样式，仅会用到当前页面
Page.wxss 会覆盖掉 App.wxss
@import "xxx/xxx.css";
