如何在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拖放到書簽欄中，然后在需要時單擊它即可。