Chrome 或 Firefox 中的 Web 开发人员模式：如何获取对象的 CSS 完整选择器？

Posted 2023-03-06

【中文标题】Chrome 或 Firefox 中的 Web 开发人员模式：如何获取对象的 CSS 完整选择器？

【英文标题】：Web Developer mode in Chrome or Firefox: how to get an object's CSS full selector?

【发布时间】：2021-04-26 03:32:14

【问题描述】：

当我打开 Web Developer 工具并检查页面时，有时我希望选择一个元素并复制（即抓取整个文本）其 CSS 选择器。

我的意思是：

由于某种原因，该框中的文本不可选择，并且右键单击不显示菜单或选项。

有没有办法抓取或导出该文本，以便我可以在我的代码中处理它？

【问题讨论】：

右键单击元素并从下拉列表中选择“编辑为 html”。在那里，您可以复制整个元素及其实体。

@lortschi 我不是指带有属性的 html 标记，我指的是 DOM“堆栈”或选择器。像 div.someclass > span#specialid > p > div > strong.otherclass 一样，即当前元素是其子元素的先前父 DOM 元素的整个列表。

使用整个选择器路径通常是不明智的，无论是在样式表中还是在 UI 测试中都使用它。首先，DOM 结构中的一点点变化就会使选择器无效，其次，从浏览器引擎的角度来看，它会使选择元素变慢。因此，您应该尽量保持选择器尽可能短，例如通过使用 id 和/或类选择器。

@SebastianZartner 我知道，我通常不这样做，但在某些情况下，我希望拥有整个 DOM 的“路径”（或者正确的术语是什么？），所以我可以选择一些关键唯一标识我需要的元素的元素，并且仍然可能对布局更改有一定的抵抗力。

【参考方案1】：

右键单击检查器中的元素，选择复制子菜单，每个浏览器都会为您提供略有不同的选项：

Chrome（以及其他基于 Chromium 的浏览器，包括新的 Microsoft Edge）为您提供了复制选择器的选项，这会生成一个经过优化但仍然相当长的选择器，用于唯一标识元素。

Firefox 为您提供了两个选项：“CSS 选择器”，其功能与 Chrome 大致相同，但为您提供了更优化的选择器，以及“CSS 路径”，为您提供了与您在屏幕截图中指向的内容相同的内容，从根开始到该元素的整个路径。 “CSS Path”是为 Web 测试工具而设计的，但对于大多数其他用例来说，它可能太过分了，我猜这就是 Chrome 没有类似功能的原因。

查看这些其他答案，我在其中详细解释了这些功能的工作原理：

How does Chrome dev tools generate CSS selectors? Chrome Dev Tools CSS selectors Method