小程序的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 的语法和功能特点,以实现期望的样式效果。

相关推荐
牛马111几秒前
Flutter Web性能优化标签解析
前端·flutter·性能优化
Bigger几秒前
Tauri (25)——消除搜索列表默认选中的 UI 闪动
前端·react.js·weui
李少兄12 分钟前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万13 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭13 分钟前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo17 分钟前
Flutter 需要 Hooks 吗?
前端
光影少年27 分钟前
前端如何虚拟列表优化?
前端·react native·react.js
Moment29 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
invicinble1 小时前
对于前端数据的生命周期的认识
前端
PieroPc1 小时前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi