如何让 CSS 选择器在 Chrome 17 的开发人员工具中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9212797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get CSS selectors to work in the Developer Tools for Chrome 17?
提问by Huliax
It appears that the search window of the Dev Tools in Chrome 17 no longer matches CSS selectors. Boo. I know I can use the JS console but it really, really helps me to see the matches within the context of the DOM. If anyone knows how I can still achieve this or alternatively, how to revert to a previous (i.e. the one I had yesterday) version of chrome I would appreciate it.
Chrome 17 中开发工具的搜索窗口似乎不再匹配 CSS 选择器。嘘。我知道我可以使用 JS 控制台，但它确实帮助我查看 DOM 上下文中的匹配项。如果有人知道我如何仍然可以实现这一目标，或者如何恢复到以前（即我昨天拥有的）版本的 chrome，我将不胜感激。
采纳答案by BoltClock
I haven't been able to find any workaround to get CSS selectors working in the search bar again.Rejoice, for they have returned!
我找不到任何解决方法让 CSS 选择器再次在搜索栏中工作。欢呼吧，因为他们回来了！
In any case, you can still use document.querySelectorAll()with a selector in the JS console, then right-click on any of the matched elements and choose Reveal in Elements Paneland it'll show you where it is in the DOM, just as with previous versions.
在任何情况下，您仍然可以document.querySelectorAll()在 JS 控制台中使用选择器，然后右键单击任何匹配的元素并在元素面板中选择显示，它会显示它在 DOM 中的位置，就像以前的版本一样.
回答by Borek Bernard
Another way is to use $$in the console, for example:
另一种方式是$$在控制台中使用，例如：
$$("#contents ul.features")
回答by Paul Irish
This was an unintended regression in Chrome that we didn't catch. Luckily Ariel (in the comments here) filed a ticketand it was fixed two days later.
这是我们没有发现的 Chrome 中的一个意外回归。幸运的是 Ariel（在此处的评论中）提交了一张罚单，两天后修复了。
If all goes well, it'll make its way to the stable channel in about 11 weeks. However the feature is now available in Chrome Canary, so I recommend using that.
如果一切顺利，它将在大约 11 周内进入稳定通道。但是该功能现在在 Chrome Canary 中可用，所以我建议使用它。
回答by wsbaser
I verify Css and XPath selectors using Natu WebSync extension for Chrome.
我使用Chrome 的 Natu WebSync 扩展验证 Css 和 XPath 选择器。
It can:
它可以：
- split selector to parts and verify them separately
- show with color how many elements are found for each selector part. 0 - Red, 1 - Green, several - Yellow
- highlight elements on the page when I hover selector part
- navigate to selector element in Elements tab when I click selector part
- 将选择器拆分为部分并分别验证它们
- 用颜色显示为每个选择器部分找到了多少个元素。0 - 红色，1 - 绿色，几个 - 黄色
- 当我悬停选择器部分时突出显示页面上的元素
- 单击选择器部分时导航到“元素”选项卡中的选择器元素
It can be very useful for those who need to write and verify complex selectors.
对于需要编写和验证复杂选择器的人来说，它非常有用。
https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac
https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac
