正在寻找获取HTML元素样式信息的工具

我正在寻找一个工具，可以显示我的确切风格，是适用于HTML元素。当然，我知道一些工具，比如Firefox或Chrome的WebDeveloper工具栏。Fireforx版本具有方向正确的“显示样式信息”选项。但是，此选项仅显示与选定元素相关的所有CSS。它不显示实际应用了哪些CSS规则

例如，可以有多个不同的选择器，它们都与特定元素匹配，并设置不同的边距、颜色或任何属性。只有一个选择器获胜并将其样式应用于元素。我想知道这是哪一个

我想选择一个元素，并查看应用于该元素的所有样式属性（边距、颜色、高度等），以及定义这些样式的选择器

---

有没有任何工具可以提供此功能？

您可以在chrome开发工具中查看此功能。它显示选定图元上的所有样式

---

如果您单击放大镜，它会将您带到为元素设置样式的选择器。

相关选项将使用开发人员的工具。例如Chrome开发工具

Chrome开发工具附带了一个名为COMPUTED的选项，我们可以在STYLE选项卡旁边找到它。它实际上显示了应用于元素的属性

注意：如果选中此项，您可以看到DemoIV和.def都具有颜色属性。但demoiv的颜色特性被应用到元素上。这是因为CSS的特殊性决定了浏览器应用的CSS规则。每个选择器在特殊性层次结构中都有空间。 如果两个选择器应用于同一个元素，则具有较高特异性的选择器获胜&层次结构为

1内联样式

2号身份证

3类、属性和伪类

4个psuedo元素，如：before，：after

还有一种测量css特异性的方法，我想这超出了问题的范围

---

希望这能帮助您了解哪些样式可以应用于元素。

您尝试过吗？Chrome developer tools目前可以做到这一点，它会删除所有不适用于元素的CSS规则。当您说Web developer Toolbar时，您指的是插件还是内置开发工具，即当您按下F12键或右键单击->检查Chrome中的元素时得到的工具？因为后者已经显示了哪种风格获胜以及它来自哪里。