7

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

4

2 回答 2

15

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

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

（对于没有实现 Selectors API 的浏览器，您将不得不依赖 jQuery，但请记住，它提供对一组不同的选择器的支持，而不是浏览器所支持的以及它自己的非标准扩展。 t 在选择器规范中找到。可以在此处找到使用 jQuery 和 Chrome 的 JavaScript 控制台测试选择器的示例。）

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

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

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

  • 如果选择器无效，则会抛出异常，您可以捕获该异常。

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

  • h1找到第一个body：

    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 中）：

    // 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
于 2012-02-07T04:44:42.973 回答
2

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

于 2014-04-28T17:47:37.697 回答