☰

获取CSS选择器

JS实现获取CSS选择器，方便开发者使用

目前为 2025-04-05 提交的版本。查看 最新版本。

作者
古海沉舟（Eazou）
评分
0 0 0
版本
1.0
创建于
2025-04-05
更新于
2025-04-05
大小
11.5 KB
许可证
古海沉舟
适用于
JS实现获取CSS选择器，方便开发者使用

写这些脚本要不停重复在dev 中 右键-复制-复制 selector， 还要自己找对应点才能得到要用的CSS选择器 就写了个工具，两次按键得到所有需要的结果：

  • 鼠标移到第一项，按ctrl+alt+s开始
  • 鼠标移到第二项，按ctrl+alt+s或者鼠标左键结束
  • 按F12控制台查看信息

得到两者的CSS选择器，得到他们最先公共祖先的CSS选择器，被复制在剪切板里

如示意图里: 祖: ol#browse-script-list Ａ: li:nth-child(10) > article > h2 > a Ｂ: li:nth-child(11) > article > h2 > a 可以轻易得出要遍历github的脚本标题只需要使用 ol#browse-script-list > li > article > h2 > a

最强的点在于这个选择器是会检查每项class在父节点下是否是重复的，保证得到的结果一定是唯一，且有效信息最短的。 比如示意图里的a的class 有script-link fr-bold-2abef3c8，但因为判断了去除这些class之后a还是唯一的，所以不会加进来 而全网其他的js实现的CSS选择器没考虑这点，要不是直接所有class全加进来是否唯一不管，要不直接无脑使用:nth-child来确保唯一，没一个想过判断下的。