微信小程序wxss不支持:hover、:active、:focus等依赖用户交互状态的伪类，因其视图层不走浏览器dom事件流；替代方案是用js控制class切换，如通过bindtap监听并setdata更新样式类名。
小程序不支持:hover、:active这些伪类选择器
因为微信小程序的视图层是独立渲染线程，不走浏览器 DOM 事件流，也没有“鼠标悬停”或“手指长按后释放”的完整状态机。所以 :hover、:active、:focus 等依赖用户交互状态的伪类，在 WXSS 中直接被忽略——哪怕写了也不会生效。
替代方案只能靠 JS 控制 class 切换：data-hover 这类自定义属性 + bindtap 或 bindtouchstart 监听，再配合 setData 更新样式类名。
常见错误现象：
— 在 H5 上点击按钮变色，小程序里完全没反应
— 开发者工具里样式面板能看到 :active 规则，但真机调试时样式不触发
WXSS 选择器列表比 CSS 少了一大截
官方明确只支持以下几种：.class、#id、element（如 view）、element, element（选择器分组）、::before、::after。像 [attribute]、div > p（子选择器）、div + p（相邻兄弟）、:nth-child() 全部不支持。
原因很实际：小程序运行在轻量 WebView 或原生渲染器上，解析复杂选择器会拖慢首屏渲染速度，也增加内存开销。微信团队做了取舍，只保留高频、低开销的选择器。
容易踩的坑：
— 用 input[type="text"] 想单独控制输入框样式 → 报错或无效
— 写 .list > .item 以为能精准选中子元素 → 实际匹配到所有 .item
— 依赖 :not(.disabled) 做条件渲染 → WXSS 不识别该语法，整个规则被丢弃
@import 路径写法和 CSS 不同，但更严格
CSS 中 @import url('./common.css') 支持带 url() 包裹，WXSS 只认裸路径：@import './common.wxss'。多一个 url() 或少一个引号，编译就报错：Parse error on line X: Unexpected token。
而且 WXSS 的 @import 是编译期处理，不支持条件导入、动态路径或变量拼接。所有被 import 的样式最终会合并进当前文件，不会产生额外请求——这点和 Web 的 runtime 加载完全不同。
使用场景注意：
— 公共变量（如颜色、字体大小）建议统一写在 app.wxss 里，避免多层 @import 嵌套导致维护困难
— @import 必须写在文件最顶部，前面不能有任何空行或注释，否则编译失败
rpx 单位让选择器“失效”得更隐蔽
这不是选择器本身的问题，但常被误判为选择器失效。比如你写了 view { width: 100px; }，在 iPhone6 上显示极小；改成 width: 200rpx 后，看起来正常了，但其实是因为 rpx 换算逻辑把 px 值“吃掉”了——此时如果再叠加一个 margin-left: 10px，这个 10px 就不会缩放，造成布局错位。
真正的问题在于：WXSS 允许混用 rpx 和 px，但混用会导致响应式失效，且某些平台（如 iOS App 端）对 px 的渲染精度更低，视觉上就像“样式没应用”。
关键提醒：
— 所有尺寸相关属性（width、height、padding、font-size、border-width）必须统一用 rpx
— line-height 和 letter-spacing 也建议用 rpx，否则文字在不同屏幕下基线偏移明显
— transform: scale(1.2) 这类函数值不受 rpx 影响，但会放大其内部所有单位，务必测试真机效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
