在Microsoft Edge中复制完整的CSS选择器

Question

我正在寻找在MS Edge F12开发人员工具中复制HTML元素的完整CSS选择器的可能性。有这样的事吗？

Answer 1

Edge无法在其开发人员工具中复制唯一的选择器路径。 Chrome和Firefox都可以。 Edge的样式窗格会按顺序或特异性对应用的选择器进行排序，因此您可以复制最具体的规则并从中进行操作。

但是，我会提醒您使用这两种技术过于沉重。因为它提供了一个唯一的选择器，所以您可以使用它来定位单个项目。正如您所指出的，这通常过于严格。它很适合偶尔修复一个很麻烦的特定元素，但不是一般开发的最佳实践。

对CSS specificity的充分理解有助于避免这种情况，但从这样一个独特的选择器开始似乎以一个不必要的特定选择器结束。几年前我做了一个咨询工作，我删除了50,000行冗余CSS，因为设计师使用了这种方法。我们能够用550行代替这个代码。他们花了将近5年的时间才达到这一点，但实际上他们已经超过了IE当时可以支持的最大选择器数量。

Answer 2

Microsoft Edge 85可以：

1. 检查元素
2. 右键单击元素
3. 在复制上下文菜单上，选择“复制选择器”