Kiss Translator 项目中关于元素选择器规则匹配的技术解析

在 Kiss Translator 项目中，用户经常遇到元素选择器规则匹配不上的问题。本文将从技术角度深入分析这类问题的成因和解决方案。

保留元素选择器的设计原理

Kiss Translator 的保留元素选择器机制主要用于防止行内元素（如 code、img 等）被错误翻译。其核心设计理念是：

• 保留元素会原样出现在翻译区域中
• 主要针对行内元素而非块级元素
• 不是用来排除整个区块不被翻译

常见问题场景分析

场景一：右侧目录被意外翻译

用户报告在 MDN 网站上，即使设置了 div.sticky-header-container * 等保留规则，右侧目录标题仍被翻译。这是因为：

1. 保留元素选择器主要作用于行内元素
2. 目录标题通常是块级元素
3. 正确的做法是调整主选择器范围，而非依赖保留规则

场景二：文档侧边栏排除问题

许多文档网站（如 Conan、OpenMP 等）使用相同框架开发，都包含左侧目录 div.wy-side-scroll。要排除这类元素：

1. 不推荐使用 :not() 伪类（效果不可靠）
2. 更好的做法是精确指定需要翻译的区域
3. 示例：.wy-nav-content :is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote, .kiss-p)

最佳实践建议

1. 精确选择原则：始终优先考虑"选择要翻译的内容"，而非"排除不翻译的内容"

2. 选择器优化：

   • 使用 article.main-page-content 等限定范围
   • 避免过度依赖通配符 *

3. 保留元素使用：

   • 主要用于保护代码片段、图片等行内元素
   • 不适合用于排除整个功能区块

4. 调试技巧：

   • 使用浏览器开发者工具验证选择器范围
   • 逐步缩小选择器范围进行测试
   • 优先使用类选择器而非标签选择器

通过理解这些原理和实践，用户可以更有效地配置 Kiss Translator 的选择器规则，获得更精准的翻译体验。