☰

如何从 Chrome 的“元素”选项卡中复制类属性列表作为 CSS 选择器？

tag-icon • tag-icon copy-paste google-chrome-devtools
如何从 Chrome 的“元素”选项卡中复制类属性列表作为 CSS 选择器？

我从 Chrome Dev Tools 中的 Elements 选项卡中的网页 HTML 中复制粘贴了很多类属性，例如

<label class="s-label mb4 d-block" for="wmd-input">

将它们用作 CSS 选择器

document.querySelectorAll(".s-label.mb4.d-block")

手动添加这些点.非常繁琐，而且容易出错。有什么办法可以自动完成吗？当我右键单击并“复制为选择器”时，我得到了一些无用的东西，例如#post-editor > div.ps-relative > label。

答案1

你可以下载一个剪贴板管理器，比如 ClipboardFusion，https://www.clipboardfusion.com/下载/。

在 ClipboardFusion 中，创建一个添加双引号和点的宏，然后为该宏指定一个快捷方式。然后只需复制选择器，输入快捷方式命令，然后粘贴即可。

宏是用 C# 编写的 - 这个可以完成您希望的操作（从 ClipboardFusion 中的宏编辑器复制）：

// The 'text' parameter will contain the text from the:
//   - Current Clipboard when run by HotKey
//   - History Item when run from the History Menu
// The returned string will be:
//   - Placed directly on the Clipboard
//   - Ignored by ClipboardFusion if it is 'null'
public static class ClipboardFusionHelper
{
    public static string ProcessText(string text)
    {
        // your code goes here
        return "\"." + text + "\"";
    }
}

相关内容