如何在JavaScript中测试CSS选择器？

Question

我怎么能测试CSS1-3选择器来检查它们是否得到了正确的元素，例如使用JavaScript（也许是jQuery）？

Answer 1

到目前为止，最简单的传统方法是根本不使用JavaScript，只需手动设置测试页面，您可以根据自己的内容测试选择器。 您在Web上看到的测试用例（如着名的CSS3.info选择器测试 ）实际上只是在线托管的加强版本。

但是如果您正在寻找JavaScript方法，可以尝试使用Selectors API 。 它可以在现代DOM实现（IE8 +和其他）中使用，它提供了一个JavaScript前端，用于使用CSS选择器查询元素节点的DOM，以及测试给定浏览器本机支持的CSS选择器。

（对于没有实现Selectors API的浏览器，你必须依赖jQuery，但请记住，它提供了对浏览器支持的不同选择器集的支持，以及它自己的非标准扩展。在Selectors规范中找到了 。可以在此处找到使用jQuery与Chrome的JavaScript控制台测试选择器的示例。）

根据您要测试的内容调用querySelector()或querySelectorAll() ，并检查返回值（最好是在浏览器的开发人员工具中，因为您只是在测试）：

• 如果找到匹配，则前一个方法返回匹配的第一个Element而后者返回匹配为NodeList所有元素。

• 如果未找到任何内容，则前者返回null而后者返回空NodeList 。

• 如果选择器无效，将抛出一个您可以捕获的异常。

以下是Firefox 10上Firebug控制台中命令编辑器（多行）的一些示例，在此问题上进行了测试：

• 找到body的第一个h1 ：

   var h1 = document.body.querySelector('h1'); console.log(h1); 

   <h1 itemprop="name"> 

• 查询我们刚刚找到的那个h1元素的后代：

   var subnodes = h1.querySelectorAll('*'); console.log(subnodes[0]); 

   <a class="question-hyperlink" href="/questions/9165859/how-do-i-test-css-selectors-in-javascript"> 

• 在Firefox中测试:-moz-any()伪类（ :-webkit-any() Safari / Chrome中的:-webkit-any() ）：

   // This selector works identically to h1 > a, li > a var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a'); console.log(hyperlinks); 

   [a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript] 

• 测试一个不存在的选择器（ 也许我们许多人希望确实存在 ）：

   // :first-of-class doesn't exist! var selector = 'div.answer:first-of-class'; try { var firstAnswer = document.querySelector(selector); console.log(firstAnswer); } catch (e) { console.log('Invalid selector: ' + selector); } 

   Invalid selector: div.answer:first-of-class 

Answer 2

http://selectorgadget.com非常适合测试和构建CSS选择器。 只需将他们提供的一段JavaScript拖放到书签栏中，然后在需要时单击它即可。