微信小程序————样式

                                 微信小程序————样式

一、基本选择器

 

1. 类选择器：

    在微信小程序中，****.wxml文件中编写代码时使用。

.it3{
background-color: blue;
border: 1px solid white;
display:flex;
justify-content: center;
}

   2.ID选择器 

#testId{
background-color: blue;
border: 1px solid white;
display:flex;
justify-content: center;
}

3.元素选择器 

eg：下面这个样式，就可以用于 本页面样式的 所有的 image标签

image{
border: 120px solid #aaa;
}

 

4.包含关系

 

 

.usermotto text{
color: red;
}

 

二、属性选择器（现在微信小程序用不了）

 

三、动态伪类选择器

       :link,:visited,:hover 暂时在微信小程序上不支持

1. :active 点击时触发的效果。

/*点击前*/
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

/*点击后*/
.userinfo-avatar:active {
width: 28rpx;
height: 28rpx;
margin: 20rpx;
border-radius: 5%;
}

2.:focus

多用于输入框 聚焦的时候