CSS 選擇器測試器

CSS 選擇器測試器的運作方式

工具功能說明

CSS 選擇器測試器會針對 HTML 輸入評估 CSS 選擇器，並以視覺方式高亮顯示所有符合的元素。你在一個面板貼上或輸入 HTML，輸入 CSS 選擇器後，即可立刻看到哪些元素符合，以及符合的總數。這能在不開啟瀏覽器 DevTools 或修改線上頁面的情況下，立即回饋選擇器的特異性與作用範圍。

常見的開發者使用情境

前端開發者使用此工具來撰寫精準的樣式選擇器、在撰寫擷取程式碼前先用範例 HTML 測試爬蟲選擇器，以及除錯為何某條 CSS 規則沒有套用到預期元素。QA 工程師會針對頁面快照驗證 Cypress 或 Playwright 的選擇器。它也適用於撰寫 RSS 閱讀器、電子郵件解析器或無頭瀏覽器自動化腳本的內容擷取規則。

資料格式、型別或變體

此工具支援完整的 CSS Selectors Level 3 規範，包括型別選擇器、class 與 ID 選擇器、帶運算子的屬性選擇器（[attr^=value]、[attr$=value]）、偽類別（:nth-child、:not、:first-of-type）、組合子（後代、子代 >、相鄰兄弟 +、一般兄弟 ~）以及偽元素（::before、::after）。複雜的複合選擇器與選擇器清單（以逗號分隔）也都完整支援。

常見陷阱與邊界情況

CSS 選擇器的比對取決於解析後的 DOM 結構，而非原始 HTML 文字 — 未閉合標籤、隱含元素（tbody）以及瀏覽器錯誤修正，可能使實際 DOM 與你在原始碼中看到的不同。偽元素（::before、::after）不是真正的 DOM 節點，無法被 querySelector 選取。XML/SVG 內容中的命名空間前綴需要特殊處理。過度特定、在範例 HTML 上可運作的選擇器，可能在標記略有不同的正式環境頁面上失效。

何時使用此工具 vs 程式碼

使用此瀏覽器工具可互動式開發選擇器，並快速針對 HTML 片段進行驗證。若用於正式的網頁爬蟲或測試自動化，請使用框架內建的選擇器測試（Playwright 的 page.locator、Puppeteer 的 page.$），它會在實際渲染的 DOM 上執行，包含 JavaScript 執行、動態內容、shadow DOM 走訪與 iframe 處理，這些都是靜態 HTML 比對無法重現的。