示例:
常用 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 的
$()选择器也兼容此处大多数语法