Chrome 开发人员工具：如何找出覆盖 CSS 规则的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13867088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Developer Tools: How to find out what is overriding a CSS rule?
提问by Ramon K.
Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?
嗯，这很简单。如果 Chrome 的开发人员工具向我显示样式已被覆盖，如何查看覆盖它的 CSS 规则？
I want to know if is there anything like "Show me what overrides this".
我想知道是否有类似“告诉我什么覆盖了这个”之类的东西。
OBS:Please, don't point me to Firebug.
OBS：请不要将我指向 Firebug。
回答by josh3736
Use the Computed Stylepanel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.
使用元素检查器的Computed Style面板。展开感兴趣的属性以查看适用规则的列表，以及哪一个获胜。
回答by user1902091
You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.
您可以简单地查看未删除的同名列表，请记住列表的重要性。
Or you can view the computed styles. They will be the actually applied styles.
或者您可以查看计算出的样式。它们将是实际应用的样式。
回答by Peter Rasmussen
crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.
crtrl + shift + c 并检查元素。然后在右下角的框中找到没有穿过它的线条的样式。
the override is in most cases at the top (and without a line through it, as this style is the "winning" one).
大多数情况下，覆盖位于顶部（并且没有一条线穿过它，因为这种风格是“获胜”风格）。
