☰

获取CSS选择器

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

ผู้เขียน
古海沉舟（Eazou）
จำนวนติดตั้งประจำวัน
0
จำนวนติดตั้งทั้งหมด
0
คะแนน
0 0 0
เวอร์ชัน
1.1
สร้างเมื่อ
05-04-2025
อัปเดตเมื่อ
07-04-2025
Size
11.6 กิโลไบต์
สัญญาอนุญาต
古海沉舟
ปรับใช้กับ

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来确保唯一，没一个想过判断下的。