主要记录自极客学院微信小程序学习视频
jekexueyuan ....
.text {
font-size: 20px;
}
width : 228rpx;
height : 228rpx;
/**
min-width:
max-width:
min-height:
max-height:
**/
background-color: //背景颜色
background-image: //背景图片
background-position:
...
border-radius: 20%; //边框圆角
border-width:10px;
border-color: #ddd;
border-style: solid;
border: 10px solid #ddd;
margin: 20rpx;
margin-top: 20rpx;
margin-right: 20rpx;
padding: 20rpx;
margin: 20rpx 20rpx 20rpx 20rpx; //上 右 下 左
...
color: red;//颜色
font-size: 30px;
font-weight: 10;
...
查看文档学习
(.name{})
class
与 .
//.wxml
//.wxss
.nickname{
width:228rpx;
height:228rpx;
}
(#name{})
id
与 #
//.wxml
//.wxss
#nickname{
width:228rpx;
height:228rpx;
}
(name{})
name
为元素名称
//.wxss
//表示对所有的image元素都显示以下样式
image{
width:228rpx;
height:228rpx;
}
(*{})
//.wxss
//表示对所有元素都显示以下样式
*{
background-color: red;
}
(p c{})
//.wxml
//.wxss
.userinfo text{
color:red;
}
(p > c{})
//.wxml
//.wxss
.usermotto text{
color:red;
}
/**
只能影响到 name text元素,不能影响到 nickname 元素;
也即是只能影响到p(父view)下一层级的c(子view),
而不能影响到子View 的 子View
**/
.usermotto>text{
color:red;
}
(c + c{})
//.wxml
//以下为 userinfo 临近的 view
//.wxss
.userinfo + view{
color:red;
}
(c ~ c{})
E[attr]
只要某类元素 E
有该属性 attr
,不管该属性的值是什么,都会使用该样式
//.wxml
//.wxss
view[bindtap]{
color:red;
}
//多个属性可以继续往后面加
view[bindtap][bindtap]{
background-color:red;
}
E[attr="value"]
只要某类元素 E
有该属性 attr
,且该属性的值等于 value
,都会使用该样式
E[attr~="value"]
某类元素 E
有该属性 attr
,只要该属性的值中有一个值等于 value
,都会使用该样式
//.wxml
//.wxss
view[class~="userinfo"]{
background-color: red;
}
E[attr|="value"]
某类元素 E
有该属性 attr
,只要该属性的值以 value-
开头 ,都会使用该样式
//.wxml
//.wxss
view[class|="userinfo"]{
background-color: red;
}
E[attr^="value"]
某类元素 E
有该属性 attr
,该属性的值必须以 value
开头 ,才会使用该样式
E[attr$="value"]
某类元素 E
有该属性 attr
,该属性的值必须以 value
结束 ,才会使用该样式
E[attr*="value"]
某类元素 E
有该属性 attr
,该属性的值包含 value
,都会使用该样式
:focus
表示元素获得焦点的时候触发
:active
表示元素被激活的时候触发,如被点击
//图片头像应用了以下 ID 选择器
#userinfo-avatar{
width: 228rpx;
height: 228rpx;
background-color: seagreen;
border: 1px solid #ddd
padding:10px;
}
//加了 :active ,表示图像被点击的时候会显示的样式
#userinfo-avatar:active{
width: 128rpx;
height: 128rpx;
background-color: red;
border: 1px solid #ddd
padding:10px;
}
以下是未激活状态显示样式:绿色背景色
点击激活后显示如下:图片变小且背景色变为红色
描述控件的状态,
:enabled
: 启用状态
:disabled
: 禁用状态
:checked
: 选中状态
//.wxml
//有三张图片
//.wxss
.userinfo-avatar{
width: 228rpx;
height: 228rpx;
background-color: seagreen;
border: 1px solid #ddd
padding:10px;
}
//:first-child 表示仅第一张图片应用以下属性,其余图片应用上面的属性
.userinfo-avatar:first-child{
width: 128rpx;
height: 128rpx;
background-color: red;
border: 1px solid #ddd
padding:10px;
}
::first-letter
:第一个字母显示样式
//.wxml
Hello World
//.wxss
.usermotto::first-letter{
color: red;
font-size:30px;
}