html - 快速获取深层嵌套元素的CSS元素列表的技术或工具

Question

我正在使用 Chrome 开发工具，并且正在处理我没有创建的代码库。

我需要遍及所有地方的深层嵌套元素。为了用 CSS 选择它们，我觉得我是在用我的眼睛手动跟踪 HTML 元素列表(这让我很费力)。

应该有一个工具可以让我选择顶部元素和我想要的(深度)嵌套元素 - 然后在 CSS 格式的 block 中给我层次结构，这样我就可以开始工作了。

我很好奇是否存在这样的工具或是否有等效工具(可能在某处的 Chrome 开发工具中？)。

谢谢。

Answer 1

我对这个问题有点不清楚(所以我可能不应该回答这个问题!)但是如果您正在寻求一种快速获取深度嵌套元素的 CSS 选择器的方法，您可以尝试 Firebug。

1. 检查元素
2. 右键单击 HTML 面板右侧的样式面板
3. 选择“添加规则”。

在整理出所需的特异性方面做得很好。

正如@TaoistWA 在评论中指出的，“复制 CSS 路径”是另一种选择。

1. 检查元素
2. 右键单击 HTML 面板中的元素
3. 选择“复制 CSS 路径”。

当然，您可以在样式面板中将它们结合起来以即时测试您的更改。