小程序的wxss和css区别?

小程序的 WXSS(WeiXin Style Sheets) 和传统的 CSS(Cascading Style Sheets) 在语法和功能上有一些区别,以下是它们的主要不同之处:

  1. 选择器语法

    • WXSS:WXSS 选择器类似于 CSS,但更加简化。常见的选择器包括元素选择器、类选择器和 ID 选择器等。
    • CSS:CSS 具有更丰富的选择器语法,包括元素选择器、类选择器、ID 选择器、伪类选择器、属性选择器、后代选择器、子选择器等。
  2. 单位

    • WXSS:WXSS 中只支持 rpx(响应式像素)作为长度单位。rpx 的实际显示大小会根据设备屏幕的宽度进行换算,适配不同的设备屏幕。
    • CSS:CSS 支持多种长度单位,如 px、em、rem、vh、vw 等。
  3. 样式属性

    • WXSS:WXSS 支持一部分 CSS 样式属性,但不支持所有的 CSS 属性。一些常见的样式属性如 color、font-size、background-color、margin、padding 等可在 WXSS 中使用。
    • CSS:CSS 支持更广泛的样式属性,涵盖了页面布局、字体样式、背景、边框、动画等方面的属性。
  4. 样式继承

    • WXSS:WXSS 不支持样式的继承,每个元素的样式需要单独定义。
    • CSS:CSS 支持样式的继承,子元素可以继承父元素的样式。
  5. 全局样式和局部样式

    • WXSS:WXSS 支持全局样式和局部样式。全局样式定义在 app.wxss 文件中,对整个小程序生效;局部样式定义在各自组件的 wxss 文件中,只对当前组件生效。
    • CSS:CSS 通常是在全局范围内生效,但可以通过将样式文件引入到特定的 HTML 文件中来实现局部样式。

总的来说,WXSS 是专门为小程序设计的样式语言,相对于 CSS 功能较为简化,限制了一些选择器语法、长度单位和样式属性。开发小程序时需要注意 WXSS 的语法和功能特点,以实现期望的样式效果。

相关推荐
狂炫冰美式21 小时前
不谈技术,搞点文化 🧀 —— 从复活一句明代残诗破局产品迭代
前端·人工智能·后端
xw51 天前
npm几个实用命令
前端·npm
!win !1 天前
npm几个实用命令
前端·npm
代码狂想家1 天前
使用openEuler从零构建用户管理系统Web应用平台
前端
dorisrv1 天前
优雅的React表单状态管理
前端
蓝瑟1 天前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv1 天前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱1 天前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder1 天前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_1 天前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端