示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载本文围绕 uni-app x基于 Vue.js 的跨端框架中 CSS 选择器的完整支持情况展开系统讲解page元素选择器在 Web、小程序与 App 蒸汽模式下的用法与差异梳理类选择器、后代选择器、兄弟选择器等 12 类选择器在六大平台形态下的兼容矩阵并结合源码级证据解析深度选择器:deep()/::v-deep的作用边界以及选择器变更触发 DOM 重绘时的性能约束与规避方案。读完本文你将能写出跨端一致、性能可靠的选择器样式代码并掌握用page选择器批量控制页面级样式的实战技巧。一、为什么 uni-app x 需要单独讨论 CSS 选择器uni-app x 同时面向 Web、微信小程序、AppAndroid/iOS与 HarmonyOS 等多个平台且 App 与 HarmonyOS 端还存在 VDOM 与 Vapor蒸汽模式两种渲染形态。不同平台、不同渲染形态对 CSS 选择器的支持能力并不一致例如通配选择器* {}仅 Web 平台可用伪类:active、伪元素::before在 App、小程序等非 Web 平台上均不可用元素选择器在 App 平台仅蒸汽模式支持page这一个标签后代选择器、兄弟选择器等关系类选择器在 App 蒸汽模式与 HarmonyOS 蒸汽模式下均不支持。因此跨端开发时必须明确哪种选择器在哪个平台上能用否则样式在某个端静默失效排查成本极高。这正是本文要解决的核心问题。二、page 元素选择器页面级样式与 body 的替代方案原文档明确了选择器使用的一个基础事实web 和小程序支持page元素选择器以替代body元素选择器。在 uni-app x 中页面结构并不存在传统 Web 意义上的body节点因此设置页面级背景、默认字色等根元素样式时应使用page选择器page { background-color: #efeff4; }该写法在微信小程序平台被广泛使用。仓库自身的全局样式文件 src/App.uvue 中即为MP-WEIXIN平台通过page选择器设置页面背景色可作为实际工程佐证/* #ifdef MP-WEIXIN */ page { background-color: #efeff4; } /* #endif */除此之外page选择器还有两个重要应用场景宽屏适配可在app.uvue的page选择器中全局设置页面宽度的max-width防止内容在宽屏上过度拉伸详见 docs/css/common/length.md 中对 rpx 与宽屏适配的讨论。批量控制页面效果媒体查询和page选择器可以在app.uvue中使用从而实现所有页面的效果批量控制除非页面配置了禁止全局样式影响见 docs/api/theme-change.md。2.1 Web 端的 html / body / :root 选择器限制对于 Web 端uni-app x 允许使用html、body、:root等选择器。但有一个关键限制由于页面的 css 样式隔离且 html 节点并未添加>style scoped .a :deep(.b) { /* ... */ } .a ::v-deep .b { /* ... */ } /style需要注意平台边界在 uni-app x 项目中深度选择器:deep()/::v-deep只在 Web 平台生效。Web 端最终编译为单页应用SPAstyle会自动添加scoped以隔离不同页面间的样式因此必须使用深度选择器来影响子组件样式。微信小程序、App 平台页面可直接影响子组件添加scoped、使用深度选择器没有意义。HBuilderX 4.71 起App 端使用深度选择器控制台不再告警视为后代选择器处理——也就是说在 App 端写:deep()会被当作普通的后代选择器来解析其实际可用性仍受上一节关系类选择器兼容矩阵的约束。此外官方还提示一般更推荐使用 uni-app x 的样式隔离策略 2.0 而不是深度选择器。样式隔离策略下同权重选择器的优先级从低到高依次为全局样式 页面样式 组件样式见 docs/css/common/style-isolation.md理解这条优先级链有助于预判样式覆盖结果。五、选择器相关的性能约束与四条重要注意事项原文档用::: warning块给出了四条与选择器直接相关的工程经验这是跨端样式编写中最容易踩坑的部分逐一展开如下。5.1 仅最后一个选择器的变更会触发 DOM 更新选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量当前只支持CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新。这是 uni-app x 在渲染性能与动态切换 class之间做出的取舍当一个节点绑定了形如.doc-body1 .row-desc1这样的后代选择器样式时只有位于选择器链末尾的 class如row-desc1变化才会触发该节点样式更新链前部的 class如doc-body1变化不会触发更新。5.2 点击态优先使用 hover-class 而非 :active:active 伪类来实现点击态很容易触发并且滚动或滑动时点击态不会消失体验较差。小程序平台均给 view 组件引入了hover-class考虑到跨端兼容和体验建议使用hover-class属性来实现点击态效果。并且伪类选择器在 App 平台目前暂不支持参见兼容矩阵。组件文档 docs/component/view.md 对hover-class给出了完整定义hover-class类型为string默认值none兼容性为 Web: 4.0、微信小程序: 4.41、Android: 3.9、iOS: 4.11、HarmonyOS: 4.61当hover-classnone时没有点击态效果HBuilder 4.0 以下版本 App 端与微信小程序效果一致手指按下进入hover-class状态后手指移动即取消HBuilder 4.0 及以上版本 App 端调整为手指在 view 范围内移动不会取消移出 view 范围才取消。用法示例view classbtn hover-classbtn-hover按钮/view5.3 不推荐用伪元素创建不占宽度的边框不推荐使用伪元素来创建不占宽度的边框W3C 标准推荐使用 box-sizing 来控制边框是否占宽度。这与上一条相互呼应伪元素选择器本就仅 Web 支持即便在 Web 端也不应用::before/::after做不占宽度边框这类 hack应使用box-sizing: border-box等标准方案控制盒模型。5.4 关系类选择器存在运行时动态计算的额外性能损耗关系类选择器分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择器无法在编译期处理必须运行时动态计算在 App 上有额外的性能损耗。推荐尽量使用简单的选择器来解决问题。这正是第三节兼容矩阵中关系类选择器在蒸汽模式大量缺失的底层原因蒸汽模式以编译期优化换取运行时性能而关系类选择器依赖运行时 DOM 关系计算与蒸汽模式的定位相悖。跨端开发时建议优先使用单类选择器或分组选择器把关系类选择器作为Web 专属增强而非通用手段。六、实战示例一动态 class 切换与末尾选择器机制原文档给出了一段直接演示第 5.1 节性能约束的示例代码template view :classdocBody text :classrowDesc描述内容/text /view /template style .doc-body1 .row-desc1 { color: #ff0000; } .doc-body1 .row-desc2 { color: #0000ff; } .doc-body2 .row-desc1 { color: #00ff00; } /style script setup languts const rowDesc ref(row-desc1) const docBody ref(doc-body1) /script代码的行为解读与原文档一致当rowDesc变量从row-desc1变为row-desc2时会更新text节点样式——因为row-desc*位于选择器链的末尾但当docBody变量从doc-body1变为doc-body2时不会更新text节点的样式——因为doc-body不是最后一个选择器非末尾的选择器变更可能影响很多 DOM 元素从而影响渲染性能。这条机制对用动态 class 做主题切换、状态切换的场景至关重要尽量把要动态切换的 class 放在选择器链的末尾或者干脆使用独立的单类选择器。七、实战示例二page 选择器 querySelector CSS 变量动态修改页面样式原文档给出了page选择器的完整实战示例源自 hello uni-app x 示例工程 pages/CSS/selector/selector.uvue。该示例默认通过page选择器给页面设置padding: 16px并支持动态切换template view 默认通过page选择器设置padding: 16px !-- WEB 和 MP-WEIXIN 暂不支持动态修改 page 的 style因此不展示切换按钮 -- !-- #ifndef WEB || MP-WEIXIN -- button idsetPagePaddingButton tapsetPagePadding切换page padding为20px/button !-- #endif -- /view /template script setup languts // #ifndef WEB || MP-WEIXIN const setPagePadding () { const pages getCurrentPages() pages[pages.length - 1].querySelector(page)?.style.setProperty(padding, var(--page-padding-change)) } // #endif /script style page { --page-padding-change: 20px; padding: var(--page-padding); } /style该示例串联了本文的多个知识点值得拆解page 选择器定义页面默认样式page { padding: var(--page-padding); }中--page-padding为预置的页面级 CSS 变量--page-padding-change为自定义 CSS 变量App 平台自 HBuilderX 4.71 起支持自定义 CSS 变量参见 docs/css/common/function.md条件编译控制平台差异由于 WEB 与 MP-WEIXIN 暂不支持动态修改page的 style示例通过#ifndef WEB || MP-WEIXIN在其余平台才渲染切换按钮运行时修改页面样式通过getCurrentPages()拿到当前页面实例后调用querySelector(page)定位页面节点再用style.setProperty(padding, var(--page-padding-change))动态写入 padding实现点击按钮把页面 padding 从 16px 切换到 20px。7.1 App 端相邻选择器的动态增删限制原文档最后还提示了一个已知限制App 端相邻选择器暂不支持动态新增或删减节点。为了优化性能减少一些重新渲染工作对应 issue 1452。也就是说在 App 平台若依赖相邻兄弟选择器.a .b的布局当通过条件渲染等手段动态增删节点时样式可能不会按预期即时生效开发时应尽量避免把这类结构建立在会动态增删的相邻节点之上。八、跨端选择器编写建议总结综合兼容矩阵、性能约束与源码证据给出如下可落地的选择器编写规范默认使用类选择器跨端全平台支持最低版本要求为 Android 3.9 / iOS 4.11 / HarmonyOS 4.61性能最佳是唯一需要重点掌握的选择器页面级样式用page选择器Web、小程序、App 蒸汽模式均支持可放在app.uvue中做全局批量控制html/body/:root仅 Web 且只能写在App.uvue关系类选择器视为 Web/VDOM 专属能力写之前先对照支持矩阵App 蒸汽模式、HarmonyOS 蒸汽模式下后代与兄弟选择器不可用动态切换 class 时保证目标 class 位于选择器链末尾或直接使用单类选择器避免触发不了样式更新的静默失效点击态用hover-class不要依赖:active伪类、伪元素在非 Web 平台均不可用Web 端需要穿透组件样式时用:deep()/::v-deep并注意其在 App 端HBuilderX 4.71 起仅被当作后代选择器处理在其他端无实际意义。如需进一步深入可继续阅读仓库内相关文档docs/vue/README.md深度选择器、docs/component/view.mdhover-class、docs/css/common/function.mdCSS 变量与 :root 替代、docs/css/common/style-isolation.md样式隔离与优先级以及 docs/css/common/length.mdrpx 与宽屏适配中的 page 选择器应用。赞分享示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载相关推荐10个必读DA项目中语义分割领域自适应经典论文解读10个必读DA项目中语义分割领域自适应经典论文解读 欢迎来到领域自适应Domain Adaptation的世界 在这个快速发展的机器学习分支中语义DFPlayer状态码完整清单2100到2401错误码快速排查指南DFPlayer状态码完整清单2100到2401错误码快速排查指南 DFPlayer 是一款简单灵活的 iOS 音频播放组件基于 AVPlayer 封装支uni-app x CSS font-size 全解析跨端字体大小设置、单位选择与性能优化指南uni app x CSS font size 全解析跨端字体大小设置、单位选择与性能优化指南 导读 本文以 uni app x 的 font size 样式示例工程前端移动开发跨平台上一篇如何构建完整的Matrix聊天生态系统Dendrite与Element客户端集成指南下一篇Makefile多目录项目管理终极指南构建复杂项目的完整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
