是否有一个工具或应用程序，通过突出显示它可以帮助您识别元素的选择器？

Question

假设您使用的是Chrome开发者工具，并点击屏幕上的DOM对象并右键单击 - ＆gt;检查元素。

是否有任何工具可以帮助您弄清楚该元素的唯一选择器是什么？

例如，我需要选择下面突出显示的DOM元素，但是当DOM很复杂时会变得很困难：

Answer 1

Firefox有一个Page Inspector工具，我觉得非常有帮助。打开页面，按Ctrl-Shift-I，然后在页面上选择一个元素。显示包含所选元素及其所有祖先的工具栏。

ref：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector（你可以看到我上面提到的显示标记的工具栏）

Answer 2

对于那段特定的html：

var fld = $('input[data-text-field="NameFirstInitLast"]');

Answer 3

除了大量的试错之外......试试这个。

我通常不会将人送到w3schools，但是他们发现的最简洁的“备忘单”参考资料引导我选择适当的选择器：

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

继续点击下一章，您将完成：

• 选择
• 事件
• 效果
• CSS
• 遍历
• AJAX
• 和一些misc的东西

打印出来并在必要时在小房间里阅读。

Answer 4

您可以获得名为CSS Selector Tester的Chrome扩展程序，它与开发人员工具类似，但会显示元素的选择器。另一个扩展称为Selector Assistant  这也是类似的。

Answer 5

您可以点击Chrome工具“元素”标签中的元素（或右键单击并选择“检查”），然后通过Chrome控制台中的$0引用该元素。无论哪个元素突出显示在控制台中都是$0。

由于您可以使用jquery包装dom元素，因此可以在控制台中执行$($0)以获取jquery元素。这对获取选择器没有多大帮助，但是如果你试图在控制台中调试一个元素是一种简单的方法。