Tailwind CSS 不支持 selection 修饰符，需在 @layer base 中手动添加 ::selection 和 ::-moz-selection 样式，且仅 color、background-color 等少数属性有效。
selection修饰符在Tailwind中根本不存在
Tailwind CSS 官方并不提供 selection 修饰符（比如 selection:text-red-500），直接写会无效。这是初学者常搜错关键词踩的第一个坑——Tailwind 的伪元素支持非常有限，::selection 不在默认生成的工具类范围内。
必须手动添加 ::selection 样式到 CSS
要控制文本选中颜色，得绕过 Tailwind 的工具类系统，在自定义 CSS 中显式声明 ::selection。推荐放在 @layer base 块里，确保它被尽早应用且不被覆盖：
@layer base {
::selection {
background-color: #3b82f6; /* 对应 tailwind 的 blue-500 */
color: #ffffff;
}
::-moz-selection {
background-color: #3b82f6;
color: #ffffff;
}
}
注意两点：
-
::-moz-selection是 Firefox 专属前缀，必须单独写，不能省略 - 不要用
!important—— Tailwind 的工具类优先级通常高于普通 CSS 规则，但@layer base写在@tailwind base之后、@tailwind components之前，天然有合理权重 - 颜色值建议直接用十六进制或 RGB，避免依赖 Tailwind 的色值 token（比如
blue-500），因为构建时不会自动解析变量名
想局部覆盖？用 class + 显式选择器
如果只希望某段文字（比如代码块或标题）有特殊选中样式，不能靠修饰符，得写带作用域的选择器：
.my-article ::selection {
background-color: #10b981;
color: white;
}
.my-article ::-moz-selection {
background-color: #10b981;
color: white;
}
然后在 HTML 中加 class：
<article class="my-article"><p>这段文字选中时会变青绿色</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </article>
关键点：
- 不能用
selection:工具类组合，也不支持group-selection:这类变体 - 浏览器对
::selection的继承限制很严格——它只接受color、background-color、text-shadow和少数几个属性，其他如font-weight或border会被忽略 - 移动端 Safari 对
::selection支持不稳定，iOS 15.4+ 才开始较完整支持background-color
为什么 Tailwind 不内置 selection 工具类
不是遗漏，是设计取舍：Tailwind 认为 ::selection 属于全局 UI 主题的一部分，变化频率低、适用范围广，更适合收口到基础样式层，而不是拆成几十个响应式/状态类。这也意味着——
你不需要为每个颜色都生成 selection:bg-red-400、selection:bg-blue-400……这些类几乎不会复用，反而增加 CSS 体积。真正需要定制的，往往就 1–2 种主题配色。
所以最轻量也最可控的做法，就是老老实实写两行 CSS，把 ::selection 当作主题配置项来维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
