| 分类 | 说明 |
|---|---|
| 类选择器 | .wrap{} |
| ID选择器 | #id{} |
| 标签选择器 | 也叫元素选择器，view{} |
| 并列选择器 | ,分隔； .wrap, .box{} |
| 后代选择器 | 空格分隔; .wrap item{} |
| 伪元素选择器 | ::before ::after ::first-letter ::first-line |
| 结构伪类选择器 | :nth-child() :first-child :last-child |
尽量使用常规选择器；不要炫技
全局变量在page中定义
小程序提供了很多UI的样式，背离了结构 - 样式 - 逻辑分离的原则，不建议使用，主要是巨丑。。。
学会使用调试器检查元素样式
<text style="color: {{color}};">hi,there.</text>
<text style="background-color: {{color}};">hi,there.</text>
<text style="backgroundColor: {{color}};">hi,there.</text>//居然不识别。。。
data: {
color:'#f40'
}
<view class="{{isActive?'bold':''}}">hi, there.</view>
<view class="title {{isActive?'bold':'normal'}}">hi, there.</view>
<view class="box" style="background-image: url({{src}});">hi, there.</view>
data: {
src:'../../images/avatar.png',
isActive:false
}
在样式目录下新建一个样式文件，命名为reset.wxss
初始化常用元素，如边框、轮廓、颜色、字体大小等；可以通过变量定制主题色--themeColor；使用主题颜色：var(--themeColor)
在app.wxss中引入，全局使用
@import './utils/css/reset.wxss';
//页面所有共享
page{
--themeColor:#eb4450;
--main-color: #f40;
--border-color: var(--main-color);
--padding: 10px;
--margin: 10px;
--gap: 10px;
min-height: 100vh;
font-size: 28rpx;
box-sizing: border-box;
}
button{
width: 100%!important;
padding: 0;
margin: 0;
font-weight: normal;
border-radius: 0;
}
//元素及其子元素共享
.wrap {
--main-color: #a4552e;
padding: 0;
}