寻找工具来获取有关HTML元素的样式信息

Question

我正在寻找一种工具，可以向我展示应用于HTML元素的精确样式。当然，我知道像Firefox或Chrome的Web Developer Toolbar这样的工具。 Fireforx版本具有“显示样式信息”选项，该选项朝着正确的方向发展。但是，此选项仅显示与所选元素相关的所有CSS。它没有显示，实际应用了哪些CSS规则。

例如，可以有不同选择器的dozends，它们都匹配特定元素并设置不同的margin，color或whatever-property。这些选择器中只有一个“获胜”并将其样式应用于元素。我想知道这是哪一个。

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

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

Answer 1

您可以在chrome dev工具中查看。它显示了所选元素的所有样式。

如果单击放大镜，则会转到设置样式元素的选择器。

Answer 2

可靠的选项是使用开发人员的工具。例如Chrome开发工具。

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

注意：如果您选中此JSFIDDLE，则可以看到#demoDiv＆amp; .def都具有颜色属性。但是#demoDiv的颜色属性已应用于元素。这是因为CSS特异性决定了浏览器应用哪个CSS规则。每个选择器都有特定层次结构中的空间。 如果两个选择器适用于同一个元素，那么具有更高特异性的元素将胜出＆amp;层次结构是

1）内联风格。

2）#id

3）类，属性和伪类。

4）psuedo元素如：before，：after

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

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