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

Question

我如何测试 CSS1-3 选择器以检查它们是否获得正确的元素，例如使用 JavaScript（也许是 jQuery）？

Answer 1

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

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

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

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

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

• 如果没有找到，前者返回null，而后者返回一个空的NodeList。

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

以下是 Firefox 10 上 Firebug 控制台中命令编辑器（多行）的一些示例，已在 这个问题：

• 在body中查找第一个h1：

  var h1 = document.body.querySelector('h1');
  控制台.log(h1);
  

• 查询我们刚刚找到的 h1 元素的后代：< /p>

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

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

  // 此选择器的工作方式与 h1 >  相同a、li＞一个
  var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a');
  console.log(超链接);
  

  [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 不存在！
  var 选择器 = 'div.answer:first-of-class';
  
  尝试 {
      var firstAnswer = document.querySelector(selector);
      console.log(firstAnswer);
  } 捕获 (e) {
      console.log('无效的选择器：' + 选择器);
  }
  

  选择器无效：div.answer:first-of-class
  

Answer 2

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