微信小程序样式基础

一、样式基础(wxss)
在wxss文件中编写样式内容,使用class等为组建指定样式
样式的属性:
尺寸:width,height,min-width,max-width,min-height,max-height等
背景:background-color,background-image,background-repeat等
边框:border,border-radius,border-width,border-color,border-style,border等
边距:margin(), padding等
文本:color, font-size等
其他(列表、内容、表格...)
二、样式选择器
基本选择器:
1)类选择器 (.name{}))
2)ID选择器 (#name{})
3)元素选择器 (name{})
4)通配符选择器 ({})(给所有控件设置样式,小程序不能用这个)
5)包含选择器 (p c{})(p表示parent, c 是chidren)
6)子元素选择器 (p > c{})(小程序不支持,只有子层才包含,孙子层不包含)
7)临近兄弟选择器 (c + c{})
8)通用兄弟元素选择器 (c ~c{})
属性选择器:
1)E[attr]
2)E[attr="value"]
3)E[attr~="value"]
4)E[attr|="value"]
5)E[attr^="value"]
6)E[attr$="value"]
7)E[attr
="value"]
伪类选择器:
1)动态伪类选择器(:link, :visited, :hover, :active, :focus)
2)状态伪类选择器 (:enabled, :disabled, :checked)
3)选择伪类选择器 (:first-child, :last-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-child, :only-of-type)
4)空内容伪类选择器 (:empty)
5)否定伪类选择器(:not)
6)伪元素(::first-line, ::first-letter, ::before, ::after, ::selection)

你可能感兴趣的:(微信小程序样式基础)