☰

获取CSS选择器

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

作者
古海沉舟（Eazou）
日安装量
0
总安装量
0
评分
0 0 0
版本
1.1
创建于
2025-04-05
更新于
2025-04-07
大小
11.6 KB
许可证
古海沉舟
适用于

JS实现获取CSS选择器，方便开发者使用，所有自己写js的都需要

写这些脚本要不停重复在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来确保唯一，没一个想过判断下的。

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址