css和wxss有什么区别？

CSS（Cascading Style Sheets）和WXSS（WeiXin Style Sheets）在前端开发中各自扮演着重要的角色，它们之间存在一些显著的区别。以下是对这些区别的详细归纳：

1. 尺寸单位：

   • WXSS引入了rpx（responsive pixel）这一尺寸单位，它能够根据屏幕宽度进行自适应调整。例如，在iPhone 6上，1rpx等于0.5px。
   • CSS则支持多种长度单位，包括rem、em、vh、vw等，这些单位在CSS中需要开发者手动进行换算。

2. 样式定义和应用：

   • WXSS提供了全局样式（定义在app.wxss中）和局部样式（定义在页面的wxss文件中）的区分。全局样式作用于所有小程序页面，而局部样式仅影响当前页面，并可能覆盖全局样式。
   • CSS没有直接的全局和局部样式之分，但可以通过在HTML文档的header部分或专门的CSS文件中定义样式，并在HTML页面中引用，以实现样式的统一管理和应用。

3. 选择器支持：

   • WXSS支持的选择器相对有限，包括.class、#id、element、并集选择器、后代选择器以及::after和::before等伪类选择器。
   • CSS则支持更广泛的选择器，如属性选择器、子元素选择器、相邻兄弟选择器等，提供了更强大的样式定制能力。

4. 组件和属性支持：

   • WXSS针对微信小程序的组件进行了样式支持的优化，一些样式属性在小程序中有特殊的表现，例如flex布局在微信小程序中得到了更好的支持。
   • CSS主要针对标准的网页元素和布局进行支持，虽然也支持flex布局等现代CSS特性，但在小程序中的表现可能与WXSS有所不同。

5. 样式继承：

   • WXSS不支持样式的继承，每个元素的样式需要单独定义。
   • CSS则支持样式的继承，子元素可以继承父元素的样式，这有助于减少重复的代码并提高样式的可维护性。

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