如何查看类的所有 CSS 规则？答案

【问题标题】：How view all css rules for class?如何查看类的所有 CSS 规则？
【发布时间】：2013-11-18 09:13:14
【问题描述】：

假设我有几个 css 文件：

//first.css
my-style {
    color: blue;
}

//second.css
my-style {
    font-weight: bold;
}

有没有办法输入类名“my-style”并在整个 html 页面中查看所有 css 文件中的所有规则？（对 Firefox、Chrome 和 Opera 感兴趣）。

【问题讨论】：

Firefox 中的 Firebug / 现代 Firefox 和 Chrome 中的开发者控制台可以提供帮助吗？（另外，IE 中的 Fiddler 或 F12 开发者工具）
不，这也没有意义（想想为什么？）。您可以在 Chrome 中查看每个元素的计算样式规则。

【解决方案1】：

不，我不知道任何浏览器中有任何此类功能。而且我认为这也没有意义。例如，假设您有以下两个样式规则：

#someId .someClass{
  //rule set 1
}

.someClass {
  //rule set 2
}

那么，现在拥有 .someClass 的所有规则意味着什么？如您所见，某些规则将适用于某些元素，而另一些规则将适用于其他元素。借助 CSS 的所有特殊性和压倒一切的规则，具有相同类的两个元素可以具有非常不同的样式。

真正有意义且受 Chrome 支持的是查看元素的计算样式规则。如果您正在调试一个问题，您可以找出哪个规则弄乱了您的设计，然后您可以查找特异性链以找出有问题的规则。

【讨论】：