本文介绍在 Tampermonkey 脚本中不依赖 JavaScript，仅通过 CSS 选择器精准隐藏聊天区域中既无 me 也无 system 类名的 元素，适用于用户消息过滤等场景。
本文介绍在 tampermonkey 脚本中不依赖 javascript，仅通过 css 选择器精准隐藏聊天区域中既无 `me` 也无 `system` 类名的 `
在构建 Tampermonkey 聊天过滤脚本时，常需静默（即隐藏而非删除）非本人及非系统类消息。由于目标 HTML 结构中待隐藏的 <li> 元素完全无 class 属性（如 <li><t>Some rude message</t></li>），而保留的元素带有明确类名（.me 或 .system），此时最简洁、高效且兼容性最佳的方案是使用纯 CSS 的 :not() 伪类选择器，配合 display: none 实现视觉隐藏。
关键在于正确书写 CSS 选择器：
- 父容器为同时拥有
mchat__messages和chat-v-1两个类名的<ol></ol>元素，需用.mchat__messages.chat-v-1（无空格，表示同一元素含多个类）； - 子元素为
<li>，需写为li； - 排除条件是“既不包含
me类，也不包含system类”，应写作:not(.me):not(.system)（注意：不能合并为:not(.me, .system)，CSS Level 3 不支持多参数:not()，该语法属 Level 4，尚未被所有浏览器完全支持）。
✅ 正确 CSS 规则如下：
.mchat__messages.chat-v-1 li:not(.me):not(.system) {
display: none;
}⚠️ 常见错误分析：
立即学习“前端免费学习笔记（深入）”；
-
document.querySelectorAll('mchat__messages chat-v-1.li:not(me):not(system)')失败，是因为：
• 缺少类选择符.（应为.mchat__messages）；
•chat-v-1.li写法错误（应为.chat-v-1）；
•:not(me)应为:not(.me)；
• 更重要的是：Tampermonkey 中若仅注入 CSS，不应使用 JS 的querySelectorAll—— 本例明确要求“不注入 JavaScript”，故 CSS 方案天然契合。
? 在 Tampermonkey 脚本中注入该样式，推荐使用 GM_addStyle（兼容性好）或原生 document.head.appendChild 创建 <style></style> 标签。例如：
// Tampermonkey 脚本内添加
GM_addStyle(`
.mchat__messages.chat-v-1 li:not(.me):not(.system) {
display: none !important;
}
`);添加 !important 可有效对抗页面原有样式冲突。
? 补充说明：
- 使用
display: none是“隐藏”而非“移除 DOM”，不影响页面结构与无障碍访问逻辑（如需彻底移除，才需 JS 的remove()）； - 若后续需动态显示/隐藏（如切换过滤开关），可改用 CSS 自定义属性（
--filter-enabled）配合 JS 切换类名，保持架构清晰； - 此方案完全规避了 DOM 操作性能开销，加载快、执行稳，是前端轻量级过滤的推荐实践。
