1. 微信小程序里 ::selection 偽元素到底能改什么先回答一個最常被問到的問題微信小程序 WXSS 里的::selection偽元素是用來控制用戶長按選中文本時(shí)那塊高亮區(qū)域的樣式的。你在頁面上按住一段文字拖動出現(xiàn)的藍(lán)色或綠色背景就是它在起作用。默認(rèn)情況下小程序在 iOS 和 Android 上給出的選中色并不一致iOS 偏藍(lán)、Android 偏青做界面設(shè)計(jì)時(shí)如果品牌色是橙色或紫色這個默認(rèn)高亮就會顯得很跳。它適合誰適合正在做小程序界面設(shè)計(jì)、希望把閱讀類、筆記類、協(xié)議類頁面的細(xì)節(jié)打磨統(tǒng)一的初學(xué)者。你不需要懂復(fù)雜的渲染原理只要會寫 WXSS 選擇器就能改。但要注意一個硬限制::selection能應(yīng)用的屬性非常少只有color、background-color、cursor、outline這幾個你寫font-size、padding、border-radius都是無效的瀏覽器和小程序渲染層會直接忽略。我試過在view和text上分別加::selection結(jié)果差別很大這也是本篇要重點(diǎn)講清楚的地方。很多教程只給一段 CSS 就結(jié)束了但小程序和普通網(wǎng)頁不一樣它的文本節(jié)點(diǎn)渲染依賴組件類型。text組件是專門承載文本的選中行為正常而view里的純文字在部分基礎(chǔ)庫版本下選中高亮根本觸發(fā)不了或者只在開發(fā)者工具里有效、真機(jī)上失效。所以這篇的路線是先講清楚::selection在小程序里的能力邊界再給你可直接復(fù)制的 WXSS 代碼然后教你怎么在真機(jī)上驗(yàn)證最后把常見的報(bào)錯和“寫了沒效果”的坑一個個排掉。全程圍繞微信小程序、WXSS、選擇器、::selection、偽元素這幾個關(guān)鍵詞展開你跟著做就能看到效果。需要說明的是::selection是偽元素寫法上是雙冒號。老教程里你會看到單冒號的:selection那是早期 CSS2 的寫法現(xiàn)在標(biāo)準(zhǔn)是雙冒號小程序里也建議統(tǒng)一用雙冒號避免解析歧義。另外 Firefox 用的是::-moz-selection但小程序運(yùn)行環(huán)境不是 Firefox所以這個前綴在小程序里不需要寫寫了也不生效反而增加維護(hù)成本。還有一個容易被忽略的點(diǎn)::selection是全局作用域的偽元素你寫一個裸的::selection {}它會作用于當(dāng)前頁面所有可選中文本。如果你只想讓某一段文字有特殊高亮就得配合類選擇器或后代選擇器比如.article ::selection。這個組合寫法是后面配置章節(jié)的核心先記住這個結(jié)構(gòu)。2. 接入前的準(zhǔn)備TaoToken 配置與小程序工程結(jié)構(gòu)在正式寫::selection之前先把開發(fā)環(huán)境和輔助工具理順。如果你只是本地調(diào)樣式其實(shí)不需要任何網(wǎng)絡(luò)服務(wù)微信開發(fā)者工具就夠了。但如果你在做 AI 輔助的界面生成、或者想讓模型幫你批量產(chǎn)出 WXSS 選擇器代碼那可以配一個穩(wěn)定的模型調(diào)用入口。這里我用 TaoToken 來做演示它的 API 地址是https://taotoken.net/api官網(wǎng)在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content需要自己拿 Key 的話去控制臺建一個就行。先說清楚::selection本身是純前端樣式不依賴任何后端。TaoToken 在這里的角色是幫你生成和校對 WXSS 代碼片段比如你描述“我要一個橙色選中高亮、文字變白的效果”讓模型直接吐可復(fù)制的代碼。所以這一章的重點(diǎn)是工程結(jié)構(gòu) 可選的模型接入兩條線都給你。小程序工程里和樣式相關(guān)的文件主要是這幾個app.wxss是全局樣式pages/xxx/xxx.wxss是頁面級樣式組件還有自己的.wxss。::selection寫在哪一層作用范圍就不一樣。寫在app.wxss里是全局生效寫在頁面 wxss 里只影響當(dāng)前頁面。我的建議是全局默認(rèn)色寫在app.wxss頁面特殊高亮寫在頁面 wxss這樣層次清晰。如果你要用模型輔助生成代碼配置方式如下。以常見的 OpenAI 兼容客戶端為例Base URL 填https://taotoken.net/apiAPI Key 填你在控制臺生成的 KeyModel ID 填你選用的模型標(biāo)識。這三件套缺一不可很多人只填了 Key 忘了 Base URL結(jié)果請求打到默認(rèn)地址上直接 401。下面是一個可復(fù)制的配置片段路徑按你實(shí)際使用的工具調(diào)整{ base_url: https://taotoken.net/api, api_key: sk-你的Key, model: 你的模型ID, timeout: 60 }如果你用的是 Claude Code 這類編碼工具配置思路一樣Base URL 指向https://taotoken.net/apiKey 和 Model ID 對應(yīng)填好。需要看詳細(xì)接入步驟的話接入文檔在https://taotoken.net/docAPI Keys 管理在https://taotoken.net/api-keys。這兩個 deep link 都帶了歸因參數(shù)方便你直接跳轉(zhuǎn)。工程結(jié)構(gòu)上我建議你新建一個測試頁面比如pages/selection-demo/selection-demo包含四個文件.wxml、.wxss、.js、.json。這樣調(diào)試::selection不會污染你現(xiàn)有的業(yè)務(wù)頁面。.json里記得寫{navigationBarTitleText: 選中高亮測試}方便真機(jī)預(yù)覽時(shí)確認(rèn)頁面沒跑錯。還有一點(diǎn)真機(jī)預(yù)覽需要你在微信開發(fā)者工具里點(diǎn)“預(yù)覽”用手機(jī)微信掃碼?；A(chǔ)庫版本建議選 2.20.0 以上太老的版本對偽元素支持不穩(wěn)定。你可以在開發(fā)者工具右上角“詳情”→“本地設(shè)置”里調(diào)整調(diào)試基礎(chǔ)庫版本。這一步做完環(huán)境就齊了下一章直接上代碼。3. 可復(fù)制的 WXSS 配置::selection 完整代碼片段這一章是核心給你能直接粘貼運(yùn)行的代碼。先明確一個原則::selection只對text組件和可選中文本穩(wěn)定生效view里的文字要配合user-select相關(guān)行為但小程序?qū)ser-select的支持也有限所以最穩(wěn)的做法是把要選中的文字放進(jìn)text里。先看 WXML 結(jié)構(gòu)我準(zhǔn)備了三種場景全局默認(rèn)、指定類名、指定組件內(nèi)view classpage view classtitle默認(rèn)全局選中效果/view text classnormal-text這是一段普通文本長按可以選中觀察高亮顏色。/text view classtitle指定類名的高亮/view text classbrand-text這段文字用了品牌色高亮選中后背景變橙色、文字變白。/text view classtitle組件內(nèi)局部高亮/view view classarticle text文章段落一選中時(shí)走 article 作用域下的樣式。/text text文章段落二同樣受 article 作用域影響。/text /view /view對應(yīng)的 WXSS 配置如下你可以整段復(fù)制到頁面 wxss 里/* 全局默認(rèn)所有可選中文本選中后深灰底白字 */ ::selection { color: #ffffff; background-color: #333333; } /* 指定類名品牌橙色高亮 */ .brand-text::selection { color: #ffffff; background-color: #ff6a00; } /* 作用域限定只影響 .article 內(nèi)部的文本 */ .article ::selection { color: #1a1a1a; background-color: #ffe08a; } /* 基礎(chǔ)排版方便觀察效果 */ .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內(nèi)部所有元素的選中樣式。如果你寫成.article::selection那就是.article這個元素自身的選中樣式兩者作用范圍不同別寫錯。這是選擇器章節(jié)里最容易混的點(diǎn)。再強(qiáng)調(diào)一次屬性限制上面只用了color和background-color這是安全范圍。你如果加border-radius: 4rpx在小程序里不會報(bào)錯但也不會有圓角效果因?yàn)檫x中高亮的繪制由渲染層控制不接受圓角。outline和cursor理論上支持但小程序是觸屏環(huán)境cursor基本沒意義outline在選中態(tài)也不明顯所以實(shí)戰(zhàn)里就聚焦顏色兩個屬性。如果你想讓全局默認(rèn)和頁面特殊高亮共存就把全局那段放進(jìn)app.wxss頁面特殊的那兩段放進(jìn)頁面 wxss。優(yōu)先級上頁面 wxss 的同類選擇器會覆蓋全局所以.brand-text::selection會蓋過全局的::selection這正是我們想要的效果。配置完保存開發(fā)者工具模擬器里就能直接長按選中看效果了。4. 真機(jī)驗(yàn)證請求與成功結(jié)果確認(rèn)代碼寫完怎么確認(rèn)它真的生效分兩步開發(fā)者工具模擬器驗(yàn)證 真機(jī)預(yù)覽驗(yàn)證。模擬器快但模擬器和真機(jī)渲染有差異尤其是選中高亮這種和系統(tǒng)交互相關(guān)的樣式必須真機(jī)過一遍才算數(shù)。先在開發(fā)者工具里操作編譯后用鼠標(biāo)在text文字上按住拖動模擬長按選中。如果看到背景色變成你配置的顏色說明選擇器寫對了。如果沒變化先檢查三點(diǎn)文字是不是放在text里、選擇器有沒有拼錯、基礎(chǔ)庫版本夠不夠。模擬器里選中高亮有時(shí)顯示不明顯可以放大模擬器比例再看。真機(jī)驗(yàn)證步驟點(diǎn)開發(fā)者工具頂部“預(yù)覽”生成二維碼手機(jī)微信掃碼打開。在手機(jī)上長按文字出現(xiàn)選中手柄后拖動觀察高亮區(qū)域顏色。這里有個細(xì)節(jié)iOS 和 Android 的選中手柄樣式不同但背景色應(yīng)該都是你配置的顏色。如果 iOS 生效、Android 不生效大概率是基礎(chǔ)庫或系統(tǒng) WebView 版本問題換個基礎(chǔ)庫再試。成功的結(jié)果應(yīng)該長這樣全局文本選中是深灰底白字.brand-text選中是橙底白字.article內(nèi)部選中是淺黃底深字。三種效果互不干擾說明作用域和優(yōu)先級都正確。你可以把下面這個驗(yàn)證清單對著過一遍驗(yàn)證項(xiàng)預(yù)期結(jié)果不通過時(shí)先查全局文本選中深灰底白字app.wxss是否引入品牌文本選中橙底白字類名是否拼寫一致文章區(qū)選中淺黃底深字后代選擇器空格是否漏寫真機(jī)與模擬器一致顏色相同基礎(chǔ)庫版本是否過低如果你在驗(yàn)證過程中想讓模型幫你分析“為什么 Android 上沒生效”可以把現(xiàn)象描述給模型通過模型對話入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content進(jìn)去問把 WXSS 代碼和基礎(chǔ)庫版本一起貼給它通常能快速定位。但記住樣式問題九成出在選擇器寫法和組件類型上先自己按清單排查一遍。真機(jī)驗(yàn)證還有一個坑部分安卓機(jī)型在text上長按會觸發(fā)系統(tǒng)復(fù)制菜單選中高亮一閃而過。這時(shí)候你需要在app.json或頁面配置里確認(rèn)沒有禁用文本選擇同時(shí)確認(rèn)text沒有設(shè)置selectablefalse。默認(rèn)text是可選中的但如果你從別處復(fù)制了代碼帶了這個屬性就會導(dǎo)致選中行為被關(guān)掉::selection自然無從觸發(fā)。驗(yàn)證通過后建議你把三種效果的截圖存下來作為界面設(shè)計(jì)規(guī)范的一部分。團(tuán)隊(duì)協(xié)作時(shí)選中高亮色應(yīng)該和品牌色體系對齊不要每個頁面各寫一套。統(tǒng)一放在app.wxss里維護(hù)頁面只做必要的覆蓋這樣后期改色只改一處。5. 常見報(bào)錯與排查401、local proxy failed、reading choices這一章把你在配置和調(diào)試::selection過程中可能撞上的報(bào)錯集中排一遍。注意::selection本身是純樣式不會產(chǎn)生網(wǎng)絡(luò)報(bào)錯但如果你同時(shí)在做模型輔助生成代碼就會遇到接口層的錯誤。兩類問題分開講。先說樣式層“寫了沒效果”的排查。第一種選擇器拼寫錯誤比如寫成::seletion少個 c或者用了單冒號:selection。小程序不會報(bào)錯只是靜默不生效所以一定要對著代碼逐字檢查。第二種文字放在view里而不是text里view的文本選中行為不穩(wěn)定換成text基本能解決。第三種作用域?qū)戝e.article::selection和.article ::selection差一個空格效果完全不同。再說接口層報(bào)錯這些通常出現(xiàn)在你用模型生成或校對代碼時(shí)。401一般是沒有正確攜帶 API Key或者 Key 填錯、過期。檢查你的配置里api_key字段是否完整注意不要有多余空格。local proxy failed通常是本地網(wǎng)絡(luò)配置或客戶端代理設(shè)置問題檢查你的工具是否配置了不可用的本地轉(zhuǎn)發(fā)地址把它清掉直連https://taotoken.net/api再試。reading choices這類報(bào)錯多半是響應(yīng)結(jié)構(gòu)和你客戶端預(yù)期的格式不匹配常見于流式返回被中斷或模型返回了非預(yù)期結(jié)構(gòu)。排查方法是先用一個最簡單的請求驗(yàn)證連通性確認(rèn) Base URL、Key、Model ID 三件套都對再逐步加復(fù)雜度。如果你用的是 Claude Code 或 Cline 這類工具配置里 Base URL 一定要寫全https://taotoken.net/api不要只寫域名。OAuth相關(guān)報(bào)錯一般出現(xiàn)在需要授權(quán)登錄的工具里如果你用的是 API Key 模式就不會碰到 OAuth。確認(rèn)你走的是 Key 認(rèn)證而不是賬號授權(quán)流程。下面這張對照表幫你快速定位報(bào)錯關(guān)鍵詞常見原因處理方向401Key 缺失或錯誤核對 api_key 字段local proxy failed本地轉(zhuǎn)發(fā)配置異常清除代理配置直連reading choices響應(yīng)結(jié)構(gòu)不匹配先用簡單請求驗(yàn)證OAuth認(rèn)證模式選錯改用 API Key 模式樣式層還有一個隱蔽問題你在app.wxss里寫了::selection但頁面 wxss 里又寫了一個不帶作用域的::selection后者會覆蓋前者導(dǎo)致你以為全局配置失效。排查時(shí)用開發(fā)者工具的樣式面板選中文字后看實(shí)際生效的是哪條規(guī)則一目了然。最后提醒::selection不要和user-select: none混用在同一元素上。如果你給某段文字設(shè)了不可選中那它永遠(yuǎn)不會有選中高亮這不是 bug是預(yù)期行為。做界面設(shè)計(jì)時(shí)可復(fù)制的內(nèi)容才需要配選中高亮純展示的標(biāo)題可以不配。6. 從選中高亮到整體界面規(guī)范下一步怎么走::selection只是 WXSS 選擇器體系里的一個小點(diǎn)但它能帶出整套界面設(shè)計(jì)思路。你把這一個偽元素吃透其實(shí)順帶理解了選擇器作用域、優(yōu)先級、組件差異這三件事這三件事是后面做任何小程序界面都繞不開的基礎(chǔ)。下一步建議你做的是把選中高亮納入項(xiàng)目的設(shè)計(jì)變量體系。比如在app.wxss頂部定義一組顏色變量選中色引用變量而不是寫死色值page { --selection-bg: #ff6a00; --selection-color: #ffffff; } ::selection { color: var(--selection-color); background-color: var(--selection-bg); }這樣改品牌色時(shí)只動變量所有頁面的選中高亮一起變。小程序?qū)?CSS 變量的支持是穩(wěn)定的放心用。這個技巧在閱讀類、協(xié)議類頁面特別實(shí)用用戶長按復(fù)制條款時(shí)高亮色和品牌一致體驗(yàn)會好很多。如果你在做的項(xiàng)目涉及大量文本交互比如筆記、聊天記錄、文檔預(yù)覽那選中高亮的統(tǒng)一只是第一步。接下來可以研究::selection和user-select的配合控制哪些區(qū)域可選中、哪些不可選中避免用戶誤選到按鈕文字或裝飾性文本。這些都屬于界面細(xì)節(jié)但正是這些細(xì)節(jié)決定了一個小程序看起來是“能用”還是“精致”。需要長期做編碼和 Agent 輔助開發(fā)的話可以考慮用 Coding Plan 把模型調(diào)用固定下來入口在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content配合 API Keys 頁面管理你的憑證。這樣你在批量生成 WXSS 選擇器代碼、校對樣式規(guī)范時(shí)不用每次重新配環(huán)境?；氐?:selection本身你現(xiàn)在手里應(yīng)該有了可復(fù)制的代碼、真機(jī)驗(yàn)證的方法、以及一份排錯清單。最實(shí)用的建議是把這篇里的測試頁面保留在你的工程里以后每次調(diào)整全局樣式都到這個頁面長按選中看一眼確認(rèn)高亮色沒被意外覆蓋。這個習(xí)慣能幫你省下大量“上線后才發(fā)現(xiàn)顏色不對”的返工時(shí)間。