Kiểm thử CSS selector

Thử CSS selector trên HTML được dán vào và xem mọi phần tử khớp kèm markup và văn bản. Dùng querySelectorAll nên kết quả khớp chính xác với trình duyệt.

CSS selector

Mã HTML

HTML được phân tích bằng DOMParser và truy vấn bằng querySelectorAll, giống hệt trong trình duyệt của bạn (mức hỗ trợ CSS Selectors Level 4 tùy trình duyệt). Script trong HTML đã dán không được thực thi.

Kiểm thử CSS selector là gì?

Công cụ kiểm thử CSS selector chạy một selector trên HTML bạn dán vào và liệt kê mọi phần tử khớp kèm outer HTML và nội dung văn bản. Nó hỗ trợ mọi thứ trình duyệt của bạn hỗ trợ, từ selector thuộc tính đến :not(), :is(), :has() và :nth-child().

Cách sử dụng Kiểm thử CSS selector

Nhập CSS selector, ví dụ nav li:not(.active) > a[href^="/"].
Dán hoặc chỉnh sửa HTML.
Đọc số lượng kết quả khớp và markup được tô sáng của từng phần tử.
Sao chép toàn bộ HTML khớp bằng nút Sao chép.

Ví dụ

Đầu vào

nav li:not(.active) > a[href^="/"] on the sample HTML

Đầu ra

1 match: <a href="/blog" data-track="nav">Blog</a>

a[href] khớp cả 4 liên kết trong ví dụ mẫu.

Khi nào nên dùng Kiểm thử CSS selector

Dùng công cụ để viết selector cho quy tắc CSS, tự động hóa kiểm thử (Playwright, Cypress), web scraping hoặc lời gọi document.querySelector. Công cụ không áp dụng style hay tính độ ưu tiên (specificity), và các pseudo-class động như :hover không bao giờ khớp trong tài liệu tĩnh.

Kiểm thử CSS selector hoạt động như thế nào

HTML được phân tích thành một document tách rời bằng DOMParser (script không được thực thi) và selector được truyền vào querySelectorAll(). Vì vậy việc so khớp giống hệt cách trình duyệt của bạn làm, kể cả mức độ hỗ trợ các tính năng mới của Selectors Level 4. Selector không hợp lệ được bắt và báo lỗi. Hiển thị tối đa 200 kết quả khớp.