官方文档地址

问题来了？既然如此，我们为什么要写这篇文章呢？

只有一个答案，这会让你更快地“容易理解”。改变你的想法。下面的文章会对官方文档进行一段类似的解释。

为了适应广大前端开发者，WXSS具备了CSS的大部分功能。同时，为了更适合开发微信小程序，WXSS对CSS进行了扩展和修改。与CSS相比，WXSS扩展的功能包括：尺寸单位和样式导入。

补充：下面我们会讲扩展功能。既然文档说WXSS具有CSS的大部分功能，那么有什么区别呢？

1.没有身体

是的，小程序的每个页面都没有body属性，但是可以通过wxss中设置页面来影响整个页面的样式，比如下面的代码

page { background:#F8F8F8 }

等等。当然，你也可以设置页面的xxx.json中的属性来影响页面下拉时出现的空白区域的颜色。一般来说，当你的页面有下拉刷新和上拉加载功能时，往往需要设置属性。

2.没有父子关系（现在版本支持，请忽略这一点。）

在使用css的时候，我们经常会保持样式的层次关系和html联系人的层次关系一致。例如，你的html代码有以下代码

我们习惯这样写css

.box .content strong {}

这样写的好处是风格不会影响其他地方。但小程序中不支持这种父子层级关系。只能一一设置，见下面小程序代码

对于上面的视图，对应的wxss应该怎么写呢？看下面的代码

// 正确的 .box {} .box-txt {} // 错误的 .box .box-txt {}

你明白这一点吗？ ！

3. 尺寸变化

在CSS中，我们有很多计量单位，比如px、em等，当然这些在小程序中仍然可以使用，只不过小程序给自己增加了另一个单位，那就是rpx。

小程序作为移动应用，需要适配不同规格的设备，兼容越来越大的手机（话说我还是喜欢这个尺寸，单手就能控制，看电影也不会撞到头）在床上）。

所以rpx最重要的特点就是可以根据屏幕宽度进行自适应。它将屏幕宽度指定为 。如上，屏幕宽度为，一共有750个物理像素，则==750个物理像素，1rpx = 0.5px = 1个物理像素。

你明白吗？官方提供了一个表格，非常容易理解，如下图所示。

这个转换比较简单，这里就不解释了。如果实在不明白，可以留言。

4. 样式导入

小程序的wxss支持样式的导入。这个功能还是蛮有用的，尤其是当我们使用其他一些库的时候，可以直接导入第三方的wxss文件，非常令人愉悦。

使用方法也很简单，看下面的代码。

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

5. 内联样式

和css一样，wxss支持两种样式，但是使用上还是有区别的。一句话概括：“如果你的风格中有动态内容，就写到 ，剩下的放到文件里。

例如，这段代码

在应用程序中写入过多的样式带来的问题是，在渲染视图时，小程序还必须解析相应的样式布局等，这不可避免地会对性能产生一些影响。

6. 选择器

另外，wxss基本上支持css中的所有选择器，比如类、ID、组件等，看看下面的官方图

而类似last-等css的高级属性也可以在wxss中愉快的使用。

7. 全局样式和局部样式

原则上，小程序中的一个wxss负责一个wxml视图文件，但应用程序总有一些共同的属性，所以小程序为应用程序本身提供了一个wxss，即app.wxss。当然，你不需要手动引入，它会自动加载到每个视图中，所以记住这一点。

一点总结

关于wxss对css支持什么，微信官方还没有提供相应的文档。更多细节还得慢慢挖掘。毕竟腾讯不是百度，会把文档写得这么好。