精通 CSS 选择器：从基础到高级调试全攻略

在前端开发中，编写准确的选择器是样式生效的前提。随着项目复杂度的增加，层级深、结构杂的 HTML 往往让选择器变得难以驾驭。尤其是当你面对第三方库生成的 HTML 或者复杂的伪类逻辑（如 :nth-child ）时，肉眼判断往往容易出错。通过实时测试工具，你可以立即验证选择器的有效性，避免频繁刷新浏览器。

1. 核心选择器深度解析

基础选择器： 标签（ div ）、类（ .class ）、ID（ #id ）。
组合选择器： 后代（ 空格 ）、子代（ > ）、相邻兄弟（ + ）、通用兄弟（ ~ ）。
属性选择器： [attr] 、 [attr=val] 、 [attr^=val] （开头）、 [attr$=val] （结尾）、 [attr*=val] （包含）。
伪类与伪元素： :hover 、 :focus 、 :not() 、 :first-child 、 :last-child 、 :nth-child(n) 、 ::before 、 ::after 。

2. 解决具体问题：常见调试场景

场景一：层级嵌套过深。 当你发现 .nav .item a 不生效时，可以用本工具粘贴 HTML 结构，测试是否因为中间缺了某个类名或者 HTML 结构不符合预期。

场景二：伪类匹配失败。 很多开发者分不清 :nth-child 和 :nth-of-type 。在工具中切换这两个选择器，观察匹配到的元素差异，能帮你快速理解其背后的逻辑。

场景三：属性选择器匹配。 比如你想匹配所有以 https 开头的链接： a[href^="https"] ，可以在这里输入多组链接实时验证。

3. 调试技巧与建议

保持简洁： 尽量避免过于深长的选择器（如 body div section ul li a ），这会降低渲染性能。
利用优先级： 如果选择器匹配正确但样式不生效，通常是 CSS 权重（Specificity）的问题，本工具可以帮你确认选择器是否真的“选中”了目标。
安全性： 本工具所有计算均在您的浏览器本地完成，不会将您的 HTML 代码上传到任何服务器。