获取CSS选择器

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

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
古海沉舟(Eazou)
日安装量
0
总安装量
1
评分
0 0 0
版本
1.2
创建于
2025-04-05
更新于
2025-04-16
大小
14.8 KB
许可证
古海沉舟
适用于

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

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

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

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

如示意图里:

祖: ol#browse-script-list
A: li:nth-child(10) > article > h2 > a
B: 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来确保唯一,没一个想过判断下的。