微信小程序的頁面開發使用的是WXML、WXSS和JavaScript。其中,WXSS是微信小程序中的樣式語言,與CSS非常相似,但也有一些特殊的操作。
下面是幾個常用的CSS在WXSS中的用法:
/*選擇器*/ .wx-class { /*樣式*/ } /*id選擇器*/ #wx-id { /*樣式*/ } /*子元素選擇器*/ .wx-class .wx-class2 { /*樣式*/ } /*屬性選擇器*/ .wx-class[attribute=value] { /*樣式*/ } /*動畫效果*/ .wx-class { animation: animation-name 1s linear infinite; } @keyframes animation-name { 0% {transform: scale(1,1);} 100% {transform: scale(1.1,1.1);} }
需要注意的是,WXSS中不支持像rem和vw單位,只支持px、rpx、em和%單位。其中,rpx是微信小程序中特有的單位,可以根據屏幕寬度自適應調整大小,非常方便。
除了這些,WXSS中還有一些與CSS不同的語法。比如說,在WXSS中無法使用nth-of-type這樣的偽類,但是可以使用:nth-child(n)和:nth-last-child(n)這樣的偽類來選擇子元素。
總體來說,如果已經熟悉了CSS的使用方法,學習WXSS并不需要太大的難度。只需要注意WXSS中的特殊用法和單位即可。
上一篇jquery過濾器類型
下一篇css怎么上下對齊文字