wxss选择器html微信小程序

div(标签选择器)view、text、icon、input、image、navigator(标签选择器)

class(类选择器)class

id(id选择器)(效率最高)id(效率最高)

element,element(层级选择器)element,element(层级选择器)

：after(伪类选择器)：after    ：before

：frist-child等：frist-child等(不建议(工具过滤易导致页面错乱))

.class  .class.class .class(不建议(工具过滤易导致页面错乱))

群组选择器群组选择器

后代选择器后代选择器

//微信小程序中placeholder的样式和html5是不一样的。需要修改placehoder的样式，通过placeholder-class=”class”来定义。

input::-webkit-input-placeholder {

color: #aab2bd;

font-size: 12px;

text-align: right;

}

input:focus::-webkit-input-placeholder { color: transparent; }

下面我就列出常用的标签及其分类。能够帮助之前没有经历过微信小程序前端开发的同学能够快速熟悉。

一、视图容器(View Container)：

标签说明

view视图容器

scroll-view可滚动视图容器

swiper可滑动的视图容器

二、基础内容(Basic Content)

标签名说明

icon 图标

text文字

progress进度条

三、表单组件(Form)

标签名说明

button按钮

form表单

input输入框

checkbox多项选择器

radio单项选择器

picker列表选择器

slider滑动选择器

switch开关选择器

label标签

四、操作反馈组件(Interaction)

标签名说明

action-sheet上拉菜单

modal模态弹窗

progress进度条

toast短通知

loading加载

五、导航(Navigation)

组件名说明

navigator应用内跳转

六、多媒体(Media)

标签名说明

audio音频

image图片

video视频

七、地图(Map)

标签名说明

map地图

八、画布(Canvas)

标签名说明

canvas画布