zhChen's Blog

沉浸式翻译 excludeSelectors

6分钟阅读

排除元素

user:

怎么查看网页中想要排除的元素的 excludeSelectors 填什么

gpt 4.1:

你问的“怎么查看网页中想要排除的元素的 `excludeSelectors` 填什么”，其实就是**如何找到网页上你不想翻译的部分的 CSS 选择器**，然后把这些选择器填到 `excludeSelectors` 字段中。下面详细讲解步骤：

步骤详解

1. 打开开发者工具

  1. 在你想排除元素的网页上右键点击你要排除的内容，比如顶部导航、底部 footer 等。
  2. 选择**“检查”或者“Inspect”**，会打开浏览器的开发者工具（一般在页面右侧或下方）。

2. 查看元素的选择器

在开发者工具里，会自动高亮你点的那个元素，这时候你可以看到类似这样的代码：

<nav class="navbar">...</nav><footer id="site-footer">...</footer>

3. 获取合适的 CSS 选择器

你可以用如下几种方式写选择器：

  • 通过标签名：nav、footer
  • 通过类名：.navbar
  • 通过 id：#site-footer
  • 更具体的路径（如需要）：.main-nav .menu、header > nav 等

4. 填写到 excludeSelectors

比如你不想翻译顶部导航和底部，可以这样写：

“excludeSelectors”: [“nav”, “footer”]

如果你想更精准，比如只排除类名为 navbar 的导航和 id 为 site-footer 的底部：

“excludeSelectors”: [“.navbar”, “#site-footer”]

总结

  1. 右键元素 → 检查 → 查看 class/id/tag。
  2. 把这些选择器写到 **excludeSelectors** 数组里。
  3. 选择器越具体，排除越精准。

示例

假如你打开某个页面，想排除以下元素：

  • <div class="sidebar"> 侧边栏
  • <footer id="main-footer"> 页脚

则应该这样写：

“excludeSelectors”: [“.sidebar”, “#main-footer”]

小提示

  • 多个元素可以写多个选择器。
  • 选择器写错了不会报错，但不会生效。
  • 可以用选择器测试工具（比如浏览器的 Console 里 **document.querySelectorAll('你的选择器')**）来验证。

如果你有具体的网页和元素，可以截图或者发 HTML 片段，我可以帮你写出对应的选择器！

选择器前面是 .（点），有的是 #（井号）？

user:

“excludeSelectors”: [“.sidebar”, “#main-footer”]中为什么一个写.号一个写#，我该怎么判断写哪个

gpt 4.1:

你的问题非常好！下面用**Markdown 结构化**为你详细讲解：

1. CSS 选择器的基本语法：

符号选择什么举例说明
.类（class）.sidebar匹配 class=“sidebar”
#ID（id）#main-footer匹配 id=“main-footer”
无符号标签（tag）nav、footer匹配所有该标签的元素

2. 如何判断该写.还是#？

2.1 看 HTML 元素属性

假设有以下 HTML 代码：

<div class="sidebar">...</div><footer id="main-footer">...</footer>
  • 有 **class="xxx"** 时，用 **.** 加类名 例：.sidebar
  • 有 **id="xxx"** 时，用 **#** 加 id 名称 例：#main-footer

2.2 具体判断步骤

  1. 打开开发者工具，右键你要排除的元素，点“检查/Inspect”。
  2. 看元素的 class 或 id 属性。
  3. 有 class 填 **.**+类名，有 id 填 #+id 名。

2.3 示例

假如 HTML 是：

<div class="top-menu">...</div><div id="right-bar">...</div><nav>...</nav>
  • 排除 .top-menu："excludeSelectors": [".top-menu"]
  • 排除 #right-bar："excludeSelectors": ["#right-bar"]
  • 排除所有 <nav> 标签："excludeSelectors": ["nav"]

3. 选择器小结

  • .xxx ： 选择 class，适用于 class="xxx"。
  • #xxx ： 选择 id，适用于 id="xxx"。
  • 标签名 ： 选择所有该标签的元素，例：footer、nav。

4. 实操建议

  • 优先用 id（唯一，最精准），如#main-footer
  • 其次用 class（可能有多个），如.sidebar
  • 再用标签（最宽泛），如nav

5. 常见问题

  • 一个元素可以有多个 class，如class="sidebar nav"
  • 一个元素只能有一个 id，如id="main-footer"

总结

  • 有 class 用点 .
  • **有 id 用井号
  • 没有 class/id 就写标签名

如还有疑问，可以发具体的 HTML 代码，我帮你判断！

联合元素如何填写 excludeSelectors

<div jsname="n0dxQc" class="GGYY2b cTMoX" ...>...</div>

我们可以选择用 class 选择器，写法如下：

1. 用 class 选择器

这个元素有两个 class：GGYY2b 和 cTMoX。

你可以任选一个 class，但通常建议用两个 class 联合选择，这样更精准。

  • 只用一个 class（会匹配所有有这个 class 的元素）
    • .GGYY2b
    • .cTMoX
  • 联合使用两个 class（只匹配同时有这两个 class 的元素）
    • .GGYY2b.cTMoX

2. 推荐写法

“excludeSelectors”: [”.GGYY2b.cTMoX”] 这样可以只排除同时有这两个 class 的元素，更安全、不容易误伤其他内容。

3. 如果有多个需要排除的，继续在数组中加

"excludeSelectors": [
".GGYY2b.cTMoX",
".anotherClass",
"#someId"
]

结论

  • 有 class 就用点号 .，多个 class 联合用 .class1.class2
  • 你这例子推荐用 .GGYY2b.cTMoX

额外说明

  • 你也可以只用 .GGYY2b 或 .cTMoX，但可能会选中其它不相关建议尽量精确精确**。
  • 如果 class 名每次刷新都变，那需要更复杂的选择器。

如还有问题，欢迎继续发代码或截图！

关系图谱