如果搜索批量 CSS 选择器测试,这个页面的信息匹配度比较高。它不是泛泛的在线工具,CSS 选择器测试直接围绕 queryselectorall 展开,预览和参数放在一起更容易判断效果,结果也容易继续整理。
示例:
常用 CSS 选择器
- 基础:
.class、#id、tag、* - 组合:
A B后代、A > B子元素、A + B紧邻、A ~ B一般兄弟 - 属性:
[attr]、[attr=val]、[attr^=val]开头、[attr$=val]结尾、[attr*=val]包含 - 伪类:
:hover、:focus、:first-child、:nth-child(2n+1)、:not(.x)、:has(span) - 伪元素:
::before、::after、::placeholder、::selection
使用建议
- 优先使用类名而非 nth-child,DOM 变动后更稳定
- 避免选择器链 5 层以上,性能差且难维护
- 测试通过后可直接复制用于 querySelectorAll、Cypress、Puppeteer
- 对应 jQuery 的
$()选择器也兼容此处大多数语法