WXSS模板样式

什么是 WXSS

WXSS (WeiXin Style Sheets) 是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的
CSS 。

WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时， WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开
发。
与 CSS 相比， WXSS 扩展的特性有：

• rpx 尺寸单位
• @import 样式导入
  

什么是 rpx 尺寸单位

rpx （ responsive pixel ）是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx 的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配， rpx 把所有设备的屏
幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx ）。

• 在较小的设备上， 1rpx 所代表的宽度较小
• 在较大的设备上， 1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适
配。

rpx 与 px 之间的单位换算(了解)

在 iPhone6 上，屏幕宽度为 375px ，共有 750 个物理像素，等分为 750rpx 。则：
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1 物理像素

设备	rpx 换算 px ( 屏幕宽度 /750)	px 换算 rpx (750/ 屏幕宽度 )
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
开发举例：在 iPhone6 上如果要绘制宽 100px ，高 20px 的盒子，换算成 rpx 单位，宽高分别为 200rpx 和40rpx 。

什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

创建一个外联样式

/* common.wxss */
.small-p {
  color:red;
}

使用@import引入外联样式 

/**index.wxss**/
@import "./common.wxss";

使用外联样式

<view><text class="small-p">import wxss</text></view>

 

全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。 

局部样式

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
注意：
① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

选择器权重

官方文档给出的选择器权重如下

官方例子

view{ // 权重为 1
  color: blue
}

.ele{ // 权重为 10
  color: red
}

#ele{ // 权重为 100
  color: pink
}

view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  color: orange
}

view.ele{ // 权重为 1 + 10 = 11
  color: green
}

而当我们在微信开发工具中可以把光标移动到选择器中会显示Selector Specificity特异性值，

参考微信开发工具打开的优先级 - CSS：层叠样式表 | MDN

，开发工具给我们的Selector Specificity: (0, 0, 1)是没有包括行间样式的，但比较多规则是一样的，为了笔记的完整性，还是写完整的吧

selector选择器	specificity权重	形式
！important	infinity（无限大）	p { color: red !important; }
行间样式	1，0，0，0	<p style=" color: red; "></p>
ID选择器	0，1，0，0	#header{ css style}
类选择器，属性选择器，伪类选择器	0，0，1，0	.first{ css style} .first:hover{ css style}
标签选择器，伪元素	0，0，0，1	p{ css style} p::before{css style}
通配符 *	0，0，0，0	*{color: red}

举个例子例子：Selector Specificity: (0, 0, 1, 1)和Selector Specificity: (0, 0, 0, 3)比较

在比较两个CSS选择器的特异性（Specificity）时，我们按照(a, b, c, d)的顺序进行，其中a是内联样式的数量，b是ID选择器的数量，c是类选择器、属性选择器和伪类的数量，d是元素选择器和伪元素的数量。
对于你提到的两个特异性值(0, 0, 1, 1)和(0, 0, 0, 3)，我们可以按照以下步骤进行比较：
内联样式（a）: 两者都是0，表示它们都没有使用内联样式，所以a值相同，不影响比较结果。
ID选择器（b）: 两者都是0，表示它们都没有使用ID选择器，所以b值也相同，我们需要继续比较下一个部分。
类选择器/属性选择器/伪类（c）: (0, 0, 1, 1)的c值是1，而(0, 0, 0, 3)的c值是0。在特异性计算中，c值较高的选择器具有更高的特异性。因此，(0, 0, 1, 1)的特异性高于(0, 0, 0, 3)。
元素选择器/伪元素（d）: 由于我们已经根据c值确定了(0, 0, 1, 1)的特异性高于(0, 0, 0, 3)，因此不需要再比较d的值。然而，如果出于完整性考虑，(0, 0, 1, 1)的d值是1，而(0, 0, 0, 3)的d值是3。尽管(0, 0, 0, 3)在d值上更高，但由于c值的差异已经决定了胜负，所以这一比较不影响最终的结果。
综上所述，(0, 0, 1, 1)的特异性高于(0, 0, 0, 3)，因为它包含一个类选择器、属性选择器或伪类，而(0, 0, 0, 3)则没有。这意味着当这两个选择器应用于同一个元素时，(0, 0, 1, 1)的选择器会优先应用其样式规则。