WXSS和普通CSS的区别（四）

一、WXSS和CSS的区别
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。设计师设计稿为750的

WXSS支持的选择器
目前支持的选择器有：（官方公布）

选择器	样例	样例描述
.class	.intro	选择所有拥有class=“info”的组件
#id	#firstname	选择拥有id=“firstname”的组件
element	view	选择所有的view组件
element，element	view,checkbox	选择所有文档的view组件和所有的checkbox组件
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件的前边插入内容

经过测试得出可用的选择器：（以后框架升级迭代可能发生变化）

实际可用的wxss选择器	样例	样例描述
element element	view text	选择view组件内部的所有text组件
:active	view:active	点击view组件时的状态
:focus	input:focus	选择获取焦点的input组件
:first-child	view:first-child	选择属于父组件的第一个子组件的每个view组件
:last-child	view:last-child	选择属于其父组件最后一个子组件每个view组件
:first-of-type	view:first-of-type	选择属于其父组件的首个view组件的每个view组件
:last-of-type	view:last-of-type	选择属于其父组件的最后view组件的每个view组件

测试伪类选择器：

.test::after {
  content:"111";
}

注意：微信小程序中是没有hover事件的，建议使用active，点击时的状态

.test:active {
  background-color: red;
}

二、wxss的样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。这样可以达到一些样式的公用，非常方便。

@import "common.wxss";
.middle-p {
  padding:15px;
}