如何在点击按钮时提取其CSS选择器？

下面是可直接使用的JavaScript实现方案，能在点击元素时生成可用于document.querySelector()的唯一CSS选择器：

核心函数：生成元素的唯一选择器 #

function generateUniqueSelector(element) {
    // 优先使用ID，ID是页面唯一的，选择器最简洁
    if (element.id) {
        return `#${element.id}`;
    }
    // 到达body元素时停止递归
    if (element.tagName === 'BODY') {
        return 'body';
    }

    let selector = element.tagName.toLowerCase();
    // 如果元素有class，取第一个有效class补充选择器
    if (element.className) {
        const classList = element.className.trim().split(/\s+/);
        selector += `.${classList[0]}`;
    }

    // 处理同标签兄弟元素，用:nth-of-type区分
    let siblingCount = 1;
    let prevSibling = element.previousElementSibling;
    while (prevSibling) {
        if (prevSibling.tagName.toLowerCase() === selector.split('.')[0]) {
            siblingCount++;
        }
        prevSibling = prevSibling.previousElementSibling;
    }
    if (siblingCount > 1) {
        selector += `:nth-of-type(${siblingCount})`;
    }

    // 递归向上拼接父元素的选择器
    const parentSelector = generateUniqueSelector(element.parentElement);
    return `${parentSelector} > ${selector}`;
}

绑定点击事件获取选择器 #

方案1：监听指定按钮的点击 #

// 替换成你目标按钮的初始选择器，用于绑定事件
const targetButton = document.querySelector('#submit_identifier > span.ladda-label');
targetButton.addEventListener('click', function(e) {
    const selector = generateUniqueSelector(e.target);
    console.log('当前按钮的CSS选择器：', selector);
    // 可选：将选择器存储到localStorage，方便后续自动点击使用
    localStorage.setItem('autoClickSelector', selector);
});

方案2：全局监听任意元素点击（用于测试） #

document.addEventListener('click', function(e) {
    const selector = generateUniqueSelector(e.target);
    console.log('点击元素的CSS选择器：', selector);
});

后续自动点击的使用示例 #

当再次访问页面时，读取存储的选择器并执行点击：

const savedSelector = localStorage.getItem('autoClickSelector');
if (savedSelector) {
    const targetElement = document.querySelector(savedSelector);
    if (targetElement) {
        targetElement.click();
    }
}

说明 #

• 生成的选择器优先保证唯一性和简洁性，优先使用ID，其次是class+标签，最后用兄弟元素索引区分
• 生成的选择器完全兼容document.querySelector()，可以直接用来定位元素

内容的提问来源于stack exchange，提问作者srini