禁用滚动文字选中变色需对滚动容器设置user-select: none；若含可交互子元素须单独设auto；marquee标签需外层包裹并设样式，不可直接作用于marquee自身。
滚动文字被选中变色是浏览器默认行为
HTML5 中用 或 CSS animation 实现的滚动文字，只要内容可聚焦、可交互（比如在文本节点里），用户鼠标拖拽或双击就可能触发选中态，背景色随之变蓝（或其他系统高亮色）。这不是 bug，是浏览器对可选中文本的正常响应。
禁用它的核心思路不是“阻止滚动”，而是“告诉浏览器这段文字不参与用户选中”：
-
user-select: none是最直接有效的 CSS 属性，兼容现代所有主流浏览器（Chrome 54+、Firefox 69+、Safari 15.4+、Edge 79+） - 必须作用于滚动容器本身（如 ），而不是其父级或子级文本节点
- 如果用了
标签（已废弃但仍有使用），它内部文本无法通过 CSS 继承user-select，得额外加一层包裹并设样式给滚动容器加
user-select: none就够了多数场景下，一行 CSS 就能解决。重点在于加在哪、怎么写：
- 推荐写在滚动元素的类选择器里，例如：
.scroll-text { user-select: none; } - 不要只写
-webkit-user-select: none—— 现代浏览器已不需要前缀，单写标准属性更简洁可靠 - 如果滚动区域还包含按钮、输入框等需交互的子元素，它们会继承
none，导致无法点击/输入；此时要单独重置：.scroll-text input, .scroll-text button { user-select: auto; }
用
时容易漏掉包裹层是内联替换元素，内部文本不响应父级的user-select，直接写无效。立即学习“前端免费学习笔记（深入）”；
- 必须在外层包一个 或
，把样式加在包裹层上- 示例结构：
- 对应 CSS：
.marquee-wrapper { user-select: none; }- 注意：部分旧版 Safari 对
内部文本的选中控制不稳定，优先改用 CSS 动画方案禁用选中后要注意的交互退化
user-select: none本质是移除文本的可选性，但它不影响 focus、click、pointer-events，所以视觉上“点不动”往往另有原因。- 如果点击失效，先检查是否误加了
pointer-events: none或opacity: 0类似干扰样式 - 双击缩放（iOS Safari）、长按复制（Android）也会被一并禁用，若产品需要保留这些能力，就不能全局关选中，得改用 JS 拦截
selectstart事件（不推荐，兼容性和维护成本高） - 无障碍方面：
user-select: none不影响屏幕阅读器读取文本，但会阻止键盘用户用 Shift+方向键选中文本——这对纯展示型滚动字幕通常无影响
- 示例结构：
- 如果用了
