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

Question

我通常CSS stylesheet使用Chrome网络浏览器追踪我.

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

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

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

Answer 1

简而言之,具体

从CSS特异性:你应该知道的事情:

1. 特性决定了浏览器应用哪条CSS规则.
2. 特殊性通常是你的CSS规则不适用于某些元素的原因,尽管你认为它们应该.
3. 每个选择器都在特定层次结构中占有一席之地
4. 如果两个选择器应用于同一元素,则具有更高特异性的元素将获胜.
5. 有四个不同的类别定义给定选择器的特定级别:内联样式,ID,类+属性和元素.
6. 如果你喜欢星球大战:CSS特异性战争,你可以理解特异性.
7. 如果你喜欢扑克,你可以理解特异性:扑克玩家的CSS特异性.
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; }

如果你说蓝色,你就错了!

正如Alochi指出的那样,如果您正在寻找更多关于特定元素所针对的样式的树视图,请在Chrome开发者工具中,转到计算选项卡并展开您感兴趣的属性.您将获得适用于该元素的所有其他规则的完整列表,以及每个规则的链接.根据你对特异性和级联的了解,选择"胜利者"的原因应该更清楚.