wxss和css有什么区别?

WXSS(WeiXin Style Sheets)和CSS(Cascading Style Sheets)在功能和应用上有很多相似之处,但针对微信小程序的特殊需求,WXSS对CSS进行了一些扩展和修改。以下是WXSS和CSS之间的主要区别:

  1. 尺寸单位 :
    • WXSS新增了rpx(responsive pixel)尺寸单位,这是一种可以根据屏幕宽度进行自适应的单位。例如,在iPhone 6上,屏幕宽度为375px,共有750个物理像素,因此1rpx等于0.5px或1物理像素。
    • CSS则支持多种长度单位,如rem、em、vh、vw等,这些单位需要手动进行换算。
  2. 样式定义和应用 :
    • WXSS提供了全局样式和局部样式。全局样式(定义在app.wxss中)会作用于所有小程序页面,而局部样式(定义在页面的wxss文件中)仅会作用于当前页面,并可能覆盖全局页面的样式(遵循就近原则)。
    • CSS则没有直接的全局和局部样式之分,但可以通过将样式定义在HTML文档的header部分或专门的CSS文件中,并在HTML页面中引用,来实现样式的统一管理和应用。
  3. 选择器支持 :
    • WXSS仅支持部分CSS选择器,包括.class、#id、element、并集选择器、后代选择器、::after和::before等伪类选择器。
    • CSS则支持更广泛的选择器,包括属性选择器、子元素选择器、相邻兄弟选择器等,这些选择器提供了更强大的样式定制能力。
  4. 组件和属性支持 :
    • WXSS针对微信小程序的组件进行了样式支持的优化,一些样式属性在小程序中有特殊的表现,如flex布局在微信小程序中得到了更好的支持。
    • CSS则主要针对标准的网页元素和布局进行支持,虽然也支持flex布局等现代CSS特性,但在小程序中的表现可能与WXSS有所不同。
  5. 样式继承 :
    • WXSS不支持样式的继承,每个元素的样式需要单独定义。
    • CSS支持样式的继承,子元素可以继承父元素的样式,这有助于减少重复的代码并提高样式的可维护性。

综上所述,WXSS和CSS在尺寸单位、样式定义和应用、选择器支持、组件和属性支持以及样式继承等方面存在明显的区别。这些区别使得WXSS更适合用于微信小程序的样式定义和美化,而CSS则更适用于标准的网页开发。

相关推荐
莪_幻尘1 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马1 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut1 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia1231 小时前
实现完整 Tool Dispatcher
开发语言·前端
IT_陈寒2 小时前
Java线程池这破玩意,差点让我周末加班排查到凌晨
前端·人工智能·后端
Mr_Mao2 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
泡海椒3 小时前
趋势分析报表:jquick-pdf折线图PDF生成实战
java·大数据·运维·服务器·前端·pdf
默_笙3 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
YIAN3 小时前
从跨域代理到 WebSocket:梳理前端实时通信的底层逻辑与完整实践
前端·websocket
一曲终散3 小时前
创建 SVG 图标预览页面:从零实现到解决 CORS 问题
前端