WXSS 子集
样式由容器自己解析并映射到 Yoga / NanoVG。app.wxss 全局生效，
页面 .wxss 后应用，内联 style 优先级最高。
选择器
| 写法 | 示例 | 说明 |
|---|---|---|
| 标签 | text | 按标签名匹配 |
| 类 | .card | 支持多个类名 |
| ID | #hero | 匹配 id |
| 后代 | .card .btn | 空格分隔，逐级向上查找 |
不支持：子代选择器
>、逗号分组 .a, .b、伪类
:first-child、::before、媒体查询、动画、@import。
单位
rpx 以 750 设计稿为基准，逻辑画布固定 1280×720，换算比例约 0.853。
也支持 px（逻辑像素）与百分比 %，百分比用于宽高、flex-basis、min/max 尺寸。
布局属性
| 属性 | 取值 |
|---|---|
display | flex、none |
flex-direction | row、column（默认） |
justify-content | flex-start、center、flex-end、space-between、space-around |
align-items / align-self | stretch、flex-start、center、flex-end |
flex | CSS 语义简写：flex: 1 → grow 1 / shrink 1 / basis 0 |
flex-grow / flex-shrink / flex-basis | 数值或长度 |
gap / column-gap | 子元素间距 |
width / height | 长度或百分比 |
min-width / min-height / max-width / max-height | 长度或百分比 |
padding 及四边 | 1–4 值简写，长度 |
margin 及四边 | 1–4 值简写，长度 |
position | absolute（配合 top/right/bottom/left） |
overflow / overflow-x / overflow-y | hidden |
外观属性
| 属性 | 取值 |
|---|---|
background / background-color | 颜色（#RGB、#RRGGBB、#RRGGBBAA、rgb()、rgba()、常用命名色） |
border | [width] [style] [color]，style 仅保留宽度与颜色 |
border-color / border-width | 颜色 / 长度 |
border-radius | 长度，支持四角简写 |
opacity | 0–1 |
box-shadow | x y blur color |
文本属性
| 属性 | 取值 |
|---|---|
color | 颜色 |
font-size | 长度，默认 28rpx |
font-weight | bold 或数值 ≥ 600 |
line-height | 倍数或无单位数值 |
text-align | left、center、right |
文本相关属性会沿节点树继承；布局与外观属性不会继承。
命名颜色
除 #hex 与 rgb()/rgba() 外，还支持
white、black、red、green、
blue、gray、lightgray、darkgray、
orange、yellow、purple、pink、
cyan、teal、brown 等。
示例
.card {
background: #1c1e22;
border-radius: 18rpx;
padding: 24rpx;
margin-bottom: 18rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
}
.row {
flex-direction: row;
align-items: center;
gap: 14rpx;
}
.panel {
flex: 1;
min-width: 0;
}属性解析位于
client/apps/miniapp/source/style.cpp，
选择器位于 wxss.cpp。