1. 微信小程序里 ::selection 伪元素到底能改什么

先回答一个最常被问到的问题：微信小程序 WXSS 里的::selection伪元素，是用来控制用户长按选中文本时那块高亮区域的样式的。你在页面上按住一段文字拖动，出现的蓝色或绿色背景，就是它在起作用。默认情况下，小程序在 iOS 和 Android 上给出的选中色并不一致，iOS 偏蓝、Android 偏青，做界面设计时如果品牌色是橙色或紫色，这个默认高亮就会显得很跳。

它适合谁？适合正在做小程序界面设计、希望把阅读类、笔记类、协议类页面的细节打磨统一的初学者。你不需要懂复杂的渲染原理，只要会写 WXSS 选择器，就能改。但要注意一个硬限制：::selection能应用的属性非常少，只有color、background-color、cursor、outline这几个，你写font-size、padding、border-radius都是无效的，浏览器和小程序渲染层会直接忽略。

我试过在<view>和<text>上分别加::selection，结果差别很大，这也是本篇要重点讲清楚的地方。很多教程只给一段 CSS 就结束了，但小程序和普通网页不一样，它的文本节点渲染依赖组件类型。<text>组件是专门承载文本的，选中行为正常；而<view>里的纯文字，在部分基础库版本下选中高亮根本触发不了，或者只在开发者工具里有效、真机上失效。

所以这篇的路线是：先讲清楚::selection在小程序里的能力边界，再给你可直接复制的 WXSS 代码，然后教你怎么在真机上验证，最后把常见的报错和“写了没效果”的坑一个个排掉。全程围绕微信小程序、WXSS、选择器、::selection、伪元素这几个关键词展开，你跟着做就能看到效果。

需要说明的是，::selection是伪元素，写法上是双冒号。老教程里你会看到单冒号的:selection，那是早期 CSS2 的写法，现在标准是双冒号，小程序里也建议统一用双冒号，避免解析歧义。另外 Firefox 用的是::-moz-selection，但小程序运行环境不是 Firefox，所以这个前缀在小程序里不需要写，写了也不生效，反而增加维护成本。

还有一个容易被忽略的点：::selection是全局作用域的伪元素，你写一个裸的::selection {}，它会作用于当前页面所有可选中文本。如果你只想让某一段文字有特殊高亮，就得配合类选择器或后代选择器，比如.article ::selection。这个组合写法是后面配置章节的核心，先记住这个结构。

2. 接入前的准备：TaoToken 配置与小程序工程结构

在正式写::selection之前，先把开发环境和辅助工具理顺。如果你只是本地调样式，其实不需要任何网络服务，微信开发者工具就够了。但如果你在做 AI 辅助的界面生成、或者想让模型帮你批量产出 WXSS 选择器代码，那可以配一个稳定的模型调用入口。这里我用 TaoToken 来做演示，它的 API 地址是https://taotoken.net/api，官网在https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，需要自己拿 Key 的话去控制台建一个就行。

先说清楚：::selection本身是纯前端样式，不依赖任何后端。TaoToken 在这里的角色是帮你生成和校对 WXSS 代码片段，比如你描述“我要一个橙色选中高亮、文字变白的效果”，让模型直接吐可复制的代码。所以这一章的重点是工程结构 + 可选的模型接入，两条线都给你。

小程序工程里和样式相关的文件主要是这几个：app.wxss是全局样式，pages/xxx/xxx.wxss是页面级样式，组件还有自己的.wxss。::selection写在哪一层，作用范围就不一样。写在app.wxss里是全局生效，写在页面 wxss 里只影响当前页面。我的建议是：全局默认色写在app.wxss，页面特殊高亮写在页面 wxss，这样层次清晰。

如果你要用模型辅助生成代码，配置方式如下。以常见的 OpenAI 兼容客户端为例，Base URL 填https://taotoken.net/api，API Key 填你在控制台生成的 Key，Model ID 填你选用的模型标识。这三件套缺一不可，很多人只填了 Key 忘了 Base URL，结果请求打到默认地址上直接 401。下面是一个可复制的配置片段，路径按你实际使用的工具调整：

{ "base_url": "https://taotoken.net/api", "api_key": "sk-你的Key", "model": "你的模型ID", "timeout": 60 }

如果你用的是 Claude Code 这类编码工具，配置思路一样，Base URL 指向https://taotoken.net/api，Key 和 Model ID 对应填好。需要看详细接入步骤的话，接入文档在https://taotoken.net/doc，API Keys 管理在https://taotoken.net/api-keys。这两个 deep link 都带了归因参数，方便你直接跳转。

工程结构上，我建议你新建一个测试页面，比如pages/selection-demo/selection-demo，包含四个文件：.wxml、.wxss、.js、.json。这样调试::selection不会污染你现有的业务页面。.json里记得写{"navigationBarTitleText": "选中高亮测试"}，方便真机预览时确认页面没跑错。

还有一点，真机预览需要你在微信开发者工具里点“预览”，用手机微信扫码。基础库版本建议选 2.20.0 以上，太老的版本对伪元素支持不稳定。你可以在开发者工具右上角“详情”→“本地设置”里调整调试基础库版本。这一步做完，环境就齐了，下一章直接上代码。

3. 可复制的 WXSS 配置：::selection 完整代码片段

这一章是核心，给你能直接粘贴运行的代码。先明确一个原则：::selection只对<text>组件和可选中文本稳定生效，<view>里的文字要配合user-select相关行为，但小程序对user-select的支持也有限，所以最稳的做法是把要选中的文字放进<text>里。

先看 WXML 结构，我准备了三种场景：全局默认、指定类名、指定组件内：

<view class="page"> <view class="title">默认全局选中效果</view> <text class="normal-text">这是一段普通文本，长按可以选中，观察高亮颜色。</text> <view class="title">指定类名的高亮</view> <text class="brand-text">这段文字用了品牌色高亮，选中后背景变橙色、文字变白。</text> <view class="title">组件内局部高亮</view> <view class="article"> <text>文章段落一，选中时走 article 作用域下的样式。</text> <text>文章段落二，同样受 article 作用域影响。</text> </view> </view>

对应的 WXSS 配置如下，你可以整段复制到页面 wxss 里：

/* 全局默认：所有可选中文本，选中后深灰底白字 */ ::selection { color: #ffffff; background-color: #333333; } /* 指定类名：品牌橙色高亮 */ .brand-text::selection { color: #ffffff; background-color: #ff6a00; } /* 作用域限定：只影响 .article 内部的文本 */ .article ::selection { color: #1a1a1a; background-color: #ffe08a; } /* 基础排版，方便观察效果 */ .page { padding: 32rpx; } .title { font-size: 30rpx; color: #888888; margin: 32rpx 0 16rpx; } .normal-text, .brand-text { font-size: 32rpx; line-height: 1.8; display: block; margin-bottom: 16rpx; } .article text { display: block; font-size: 32rpx; line-height: 1.8; margin-bottom: 12rpx; }

注意.article ::selection中间有个空格，这表示后代选择器，意思是.article内部所有元素的选中样式。如果你写成.article::selection，那就是.article这个元素自身的选中样式，两者作用范围不同，别写错。这是选择器章节里最容易混的点。

再强调一次属性限制：上面只用了color和background-color，这是安全范围。你如果加border-radius: 4rpx，在小程序里不会报错，但也不会有圆角效果，因为选中高亮的绘制由渲染层控制，不接受圆角。outline和cursor理论上支持，但小程序是触屏环境，cursor基本没意义，outline在选中态也不明显，所以实战里就聚焦颜色两个属性。

如果你想让全局默认和页面特殊高亮共存，就把全局那段放进app.wxss，页面特殊的那两段放进页面 wxss。优先级上，页面 wxss 的同类选择器会覆盖全局，所以.brand-text::selection会盖过全局的::selection，这正是我们想要的效果。配置完保存，开发者工具模拟器里就能直接长按选中看效果了。

4. 真机验证请求与成功结果确认

代码写完，怎么确认它真的生效？分两步：开发者工具模拟器验证 + 真机预览验证。模拟器快，但模拟器和真机渲染有差异，尤其是选中高亮这种和系统交互相关的样式，必须真机过一遍才算数。

先在开发者工具里操作：编译后，用鼠标在<text>文字上按住拖动，模拟长按选中。如果看到背景色变成你配置的颜色，说明选择器写对了。如果没变化，先检查三点：文字是不是放在<text>里、选择器有没有拼错、基础库版本够不够。模拟器里选中高亮有时显示不明显，可以放大模拟器比例再看。

真机验证步骤：点开发者工具顶部“预览”，生成二维码，手机微信扫码打开。在手机上长按文字，出现选中手柄后拖动，观察高亮区域颜色。这里有个细节，iOS 和 Android 的选中手柄样式不同，但背景色应该都是你配置的颜色。如果 iOS 生效、Android 不生效，大概率是基础库或系统 WebView 版本问题，换个基础库再试。

成功的结果应该长这样：全局文本选中是深灰底白字，.brand-text选中是橙底白字，.article内部选中是浅黄底深字。三种效果互不干扰，说明作用域和优先级都正确。你可以把下面这个验证清单对着过一遍：

如果你在验证过程中想让模型帮你分析“为什么 Android 上没生效”，可以把现象描述给模型，通过模型对话入口https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=进去问，把 WXSS 代码和基础库版本一起贴给它，通常能快速定位。但记住，样式问题九成出在选择器写法和组件类型上，先自己按清单排查一遍。

真机验证还有一个坑：部分安卓机型在<text>上长按会触发系统复制菜单，选中高亮一闪而过。这时候你需要在app.json或页面配置里确认没有禁用文本选择，同时确认<text>没有设置selectable="false"。默认<text>是可选中的，但如果你从别处复制了代码带了这个属性，就会导致选中行为被关掉，::selection自然无从触发。

验证通过后，建议你把三种效果的截图存下来，作为界面设计规范的一部分。团队协作时，选中高亮色应该和品牌色体系对齐，不要每个页面各写一套。统一放在app.wxss里维护，页面只做必要的覆盖，这样后期改色只改一处。

5. 常见报错与排查：401、local proxy failed、reading choices

这一章把你在配置和调试::selection过程中可能撞上的报错集中排一遍。注意，::selection本身是纯样式，不会产生网络报错，但如果你同时在做模型辅助生成代码，就会遇到接口层的错误。两类问题分开讲。

先说样式层“写了没效果”的排查。第一种：选择器拼写错误，比如写成::seletion少个 c，或者用了单冒号:selection。小程序不会报错，只是静默不生效，所以一定要对着代码逐字检查。第二种：文字放在<view>里而不是<text>里，<view>的文本选中行为不稳定，换成<text>基本能解决。第三种：作用域写错，.article::selection和.article ::selection差一个空格，效果完全不同。

再说接口层报错，这些通常出现在你用模型生成或校对代码时。401一般是没有正确携带 API Key，或者 Key 填错、过期。检查你的配置里api_key字段是否完整，注意不要有多余空格。local proxy failed通常是本地网络配置或客户端代理设置问题，检查你的工具是否配置了不可用的本地转发地址，把它清掉，直连https://taotoken.net/api再试。

reading choices这类报错，多半是响应结构和你客户端预期的格式不匹配，常见于流式返回被中断或模型返回了非预期结构。排查方法是先用一个最简单的请求验证连通性，确认 Base URL、Key、Model ID 三件套都对，再逐步加复杂度。如果你用的是 Claude Code 或 Cline 这类工具，配置里 Base URL 一定要写全https://taotoken.net/api，不要只写域名。

OAuth相关报错一般出现在需要授权登录的工具里，如果你用的是 API Key 模式，就不会碰到 OAuth。确认你走的是 Key 认证而不是账号授权流程。下面这张对照表帮你快速定位：

样式层还有一个隐蔽问题：你在app.wxss里写了::selection，但页面 wxss 里又写了一个不带作用域的::selection，后者会覆盖前者，导致你以为全局配置失效。排查时用开发者工具的样式面板，选中文字后看实际生效的是哪条规则，一目了然。

最后提醒，::selection不要和user-select: none混用在同一元素上。如果你给某段文字设了不可选中，那它永远不会有选中高亮，这不是 bug，是预期行为。做界面设计时，可复制的内容才需要配选中高亮，纯展示的标题可以不配。

6. 从选中高亮到整体界面规范：下一步怎么走

::selection只是 WXSS 选择器体系里的一个小点，但它能带出整套界面设计思路。你把这一个伪元素吃透，其实顺带理解了选择器作用域、优先级、组件差异这三件事，这三件事是后面做任何小程序界面都绕不开的基础。

下一步建议你做的，是把选中高亮纳入项目的设计变量体系。比如在app.wxss顶部定义一组颜色变量，选中色引用变量而不是写死色值：

page { --selection-bg: #ff6a00; --selection-color: #ffffff; } ::selection { color: var(--selection-color); background-color: var(--selection-bg); }

这样改品牌色时只动变量，所有页面的选中高亮一起变。小程序对 CSS 变量的支持是稳定的，放心用。这个技巧在阅读类、协议类页面特别实用，用户长按复制条款时，高亮色和品牌一致，体验会好很多。

如果你在做的项目涉及大量文本交互，比如笔记、聊天记录、文档预览，那选中高亮的统一只是第一步。接下来可以研究::selection和user-select的配合，控制哪些区域可选中、哪些不可选中，避免用户误选到按钮文字或装饰性文本。这些都属于界面细节，但正是这些细节决定了一个小程序看起来是“能用”还是“精致”。

需要长期做编码和 Agent 辅助开发的话，可以考虑用 Coding Plan 把模型调用固定下来，入口在https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，配合 API Keys 页面管理你的凭证。这样你在批量生成 WXSS 选择器代码、校对样式规范时，不用每次重新配环境。

回到::selection本身，你现在手里应该有了可复制的代码、真机验证的方法、以及一份排错清单。最实用的建议是：把这篇里的测试页面保留在你的工程里，以后每次调整全局样式，都到这个页面长按选中看一眼，确认高亮色没被意外覆盖。这个习惯能帮你省下大量“上线后才发现颜色不对”的返工时间。