样式规范校验

CMSS 规则

CMSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector { declaration1; declaration2; ... declarationN } 每条声明由一个属性和一个值组成。

声明

属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，一条声明以分号结尾。

selector {
    property1: value1;
    property2: value2;
}

selector应为一条独立的id名称或者class名称，不支持级联

// 正确
.selector {
    property1: value1;
    property2: value2;
}
#selector {
    property1: value1;
    property2: value2;
}

// 错误
#selector1 .selector {
    property1: value1;
    property2: value2;
}

多端之间的差异对比

CSS属性 H5 小程序 weex
布局 all all flexbox
盒模型 all all 只支持display:border-box
float浮动 ✅ ✅ ❌
display:inline-block|none ✅ ✅ ❌
ID选择器 ✅ ✅ ❌
类选择器 ✅ ✅ ✅
属性选择器 ✅ ✅ ❌
级联选择器、派生选择器(后代、子元素、相邻兄弟) ✅ ✅ ❌
选择器分组 ✅ ✅ ✅
伪类(:active|:focus) ✅ ✅ ✅
伪类(:hover|:link|:visited|:first-child|:lang) ✅ ✅ ❌
伪元素(:first-letter|:first-line|:before|:after) ✅ ✅ ❌
百分比定值 ✅ ✅ ❌
line-height:1 ✅ ✅ ❌
尺寸 px|rem|em|vw|vh px|rpx px
!important ✅ ✅ ❌
注意:框架会根据上表所述的多端之间的差异做校验。

results matching ""

    No results matching ""