Greasy Fork is available in English.

获取CSS选择器

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

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

You will need to install a user script manager extension to install this script.

(Tôi đã có Trình quản lý tập lệnh người dùng, hãy cài đặt nó!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

Tác giả
古海沉舟(Eazou)
Cài đặt hàng ngày
0
Số lần cài đặt
2
Đánh giá
0 0 0
Phiên bản
1.2
Đã tạo
05-04-2025
Đã cập nhật
16-04-2025
Kích thước
10 KB
Giấy phép
古海沉舟
Áp dụng cho

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