微信小程序中的WXSS 样式

最新推荐文章于 2025-07-11 05:48:28 发布

ssyes123

最新推荐文章于 2025-07-11 05:48:28 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/ssyes123/article/details/79734732

微信小程序专栏收录该内容

11 篇文章

订阅专栏

WXSS是微信小程序中用于描述WXML组件样式的样式语言，类似于CSS但具有一些扩展和修改。它包括全局样式app.wxss和局部样式page.wxss。WXSS的特色在于其响应式单位rpx和特定的样式导入方式。此外，它提供了类似.class, #id, element等选择器来定位组件。例如，.intro选择所有class为intro的组件，#firstname选择id为firstname的组件，view选择所有view组件，view::before和view::after则用于在组件前后插入内容。" 93850463,7069366,Python+Selenium自动化测试实践指南,"['Python', 'Selenium', '自动化测试', 'Markdown', '图表']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中的WXSS 样式

WXSS是一套样式语言，用于描述 WXML 的组件样式，所以说WXSS是用来控制WXML。

简单来说，WXML表示页面有什么内容，而WXSS表示页面内容放置位置，尺寸大小，颜色等等。

WXSS 具有 CSS 大部分的特性，也就是对页面的样式进行控制，当然， WXSS 也有一些区别于CSS的扩充和修改。

小程序里的app.wxss 作为全局样式控制，用来控制小程序的全局样式，而在当前页面呢，page.wxss（会覆盖app.wxss样式的功能）只对当前页面有效果。

WXSS区别有CSS的地方有

（1）尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。

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

（2）样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

如：

/** common.wxss **/
.small-p {
  padding:5px;
}

在引用common.wxss时候，

/** app.wxss **/
@import "common.wxss";                    /** 导入外联样式 **/
.middle-p {
  padding:15px;
}

WXSS里的选择器

目前常用的选择器有：

（1）.class （.intro）表示选择所有拥有 class="intro" 的组件
（2）#id （#firstname ）表示选择拥有 id="firstname" 的组件
（3）element（如 view）表示选择所有 view 组件
（4）element, element（如view, checkbox ）选择所有文档的 view 组件和所有的 checkbox 组件
（5）::after （如view::after）表示在 view 组件后边插入内容
（6）::before （如view::before）表示在 view 组件前边插入内容