我怎么知道为什么忽略CSS样式？

Question

我通常使用CSS网络浏览器跟踪我的stylesheet Chrome。

我可以看到我的一些样式被Chrome的检查窗口忽略了 - 样式被黑线击中。

我不明白为什么会被忽视。通常，我会用眼睛跟踪所有风格，看看它被忽略的原因。

我可以通过Chrome或其他方法了解结构（继承）信息吗？

Answer 1

简而言之，

来自CSS Specificity: Things You Should Know：

  

  
1. 特异性确定浏览器应用哪种CSS规则。
  
2. 特殊性通常是您的CSS规则不适用于某些元素的原因，尽管您认为它们应该。
  
3. 每个选择器都在特异性层次结构中占有一席之地。
  
4. 如果两个选择器适用于同一个元素，那么具有更高特异性的元素将。
  
5. 有四个不同的类别定义给定选择器的特定级别：内联样式，ID，类+属性和元素。
  
6. 如果你喜欢星球大战，你可以理解特异性：CSS Specificity Wars。
  
7. 如果你喜欢扑克，你可以理解特异性：CSS Specificity for Poker Players。
  
8. 当选择器具有相同的特异性值时，最新的规则是重要的规则。
  
9. 当选择器具有不相等的特异性值时，更具体的规则是重要的规则。
  
10. 具有更多特定选择器的规则具有更高的特异性。
  
11. 最后定义的规则会覆盖之前存在冲突的规则。
  
12. 嵌入式样式表比其他规则具有更高的特异性。
  
13. ID选择器的特异性高于属性选择器。
  
14. 您应该始终尝试使用ID来提高特异性。
  
15. 类选择器击败任意数量的元素选择器。
  
16. 通用选择器和继承的选择器具有0,0,0,0的特异性。
  
17. 您可以使用CSS特异性计算器计算CSS特异性。
  

例如

如果您的p课程为a，您会根据以下规则预测它的颜色：

p.a { color: red;  }
 .a { color: blue; }

If you said blue, you'd be wrong!

作为Alochi pointed out，如果您要查找特定元素所点击的样式的树视图的更多内容，请在Chrome开发者工具中转到计算选项卡并扩展您感兴趣的属性。您将获得适用于该元素的所有其他规则的完整列表，并带有指向每个规则的链接。根据你对特异性和级联的了解，应该更清楚为什么＆＃34;胜利者＆＃34;被选中。

Answer 2

我通常会在Firefox上找到Firebug，对于调试CSS有点麻烦。

选择元素并查看计算选项卡将显示特定样式的来源。那将有助于解决“为什么”的问题。

大多数网络开发人员都知道样式shees的级联性质及其工作原理：Inline＆gt;页面＆gt;片。这是应用的最后一个声明。没有多少开发人员知道的是特性。

• http://css-tricks.com/specifics-on-css-specificity/
• http://www.htmldog.com/guides/css/intermediate/specificity/

在坚果壳中，选择器越具体，优先级越高。

E.g #anID.aClass将覆盖p.aClass将覆盖.aClass

Kyles' answer有更多具体细节