微信小程式————樣式

一、基本選擇器

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

多用於輸入框 聚焦的時候