小程序中.page .header失效，因wxss仅支持类选择器和后代类组合，禁用标签、id、属性选择器及通配符；app端原生组件层级最高，须用cover-view/cover-image覆盖；多端样式需按平台拆分，避免全局污染。
直接说结论：非H5端（小程序、App）不支持通配符*、标签选择器、ID选择器、属性选择器，且默认不启用scoped；H5端默认启用scoped，但其他端不会自动隔离。这是样式错位和全局污染的主因。
为什么小程序里写 .page .header 会失效？
微信小程序的 WXSS 引擎极度精简，只支持类选择器（.class）和后代类组合（.parent .child），禁用所有非类选择器：
-
div、button等标签选择器 → 编译报错或静默忽略 -
#headerID选择器 → 不生效 -
[data-id]属性选择器 → 小程序不识别 -
*通配符 → 明确禁止，编译阶段就报错
实操建议：所有选择器必须以点号开头，且只用类名嵌套。比如把 header .title 改成 .header .title，并确保 .header 是你手动加在元素上的 class。
App端样式“飘”到原生组件上面怎么办？
App端（尤其是 Android 4.4–5.0 系统 WebView）对 z-index 和层叠上下文支持极弱，video、map、camera 等原生组件永远在最上层，普通 div 或 view 无法覆盖。
- 不要试图用
z-index: 9999盖住<video></video>—— 它无效 - 必须改用
<cover-view></cover-view>和<cover-image></cover-image>替代普通视图 -
cover-view只支持有限样式：flex、padding、background-color，不支持position: absolute或伪类
示例：想在视频上叠加一个按钮，不能写 <view class="btn">播放</view>，得写 <cover-view class="btn">播放</cover-view>，且样式只能写在 cover-view 上，不能靠父级 class 传递。
怎么让组件样式不互相污染？
H5 默认 scoped，但小程序和 App 默认不开启，所以一个页面的 .btn 会意外影响另一个页面的 .btn。
- 新组件一律加
scoped：<style scoped></style>，这是成本最低、效果最稳的隔离方式 - 老项目补救：在
<style></style>标签里手动加scoped属性，uni-app 会自动注入属性选择器（如.btn[data-v-xxx]） - 避免用全局 class 名（如
.container、.text），哪怕加了scoped，也建议带业务前缀：.user-info__title
注意：scoped 对 @import 进来的 CSS 文件无效，公共样式变量建议用 CSS 变量或 <style></style> 内联定义。
哪些 CSS 属性在多端最容易出问题？
不是所有合法 CSS 都能跨端跑通。以下属性在非H5端常被忽略或降级处理：
-
backdrop-filter：仅 H5 支持，小程序/App 编译时直接丢弃 -
filter: blur()：App 端部分 Android 机型不支持，iOS 较稳定 -
clip-path：小程序完全不支持，App 看系统 WebView 版本 -
position: fixed：小程序需考虑 tabBar 高度，App 需适配安全区，H5 最自由
实操建议：关键交互区域（如吸顶导航、底部操作栏）优先用 position: sticky + top/bottom，再配合 --uni-safe-area-inset-top 和 --uni-safe-area-inset-bottom 变量做兜底，比硬写 fixed 更可靠。
最常被忽略的一点：样式兼容不是“写一次，到处跑”，而是“写三遍，各取所需”——平台差异是客观存在的，靠猜或复制粘贴只会让问题延迟爆发。真正省事的做法，是早建平台抽象层（比如 platform/style/ 下按端拆分），而不是等上线前两天才去 patch 某个按钮的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
