如何在Chrome开发者工具中过滤和显示仅应用的CSS（如Firefox中的Firebug）
[英]How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)
问题描述
Background story: I have a page with multiple CSS that override each other. 
背景故事：我有一个包含多个CSS的页面，它们相互覆盖。 There are so many crossed out CSS style, so I don't want to see them. 有这么多划掉的CSS样式，所以我不想看到它们。
I know Firebug on Firefox provide this feature (Only Show Applied CSS), which can show what CSS style in what CSS file is being applied (neat !). 我知道Firefox上的Firebug提供了这个功能（只显示应用的CSS），它可以显示CSS文件的CSS样式（整洁！）。
How do we have this feature on Chrome ? 我们如何在Chrome上使用此功能？ I tried install Firebug Lite for Chrome but no luck. 我尝试安装Firebug Lite for Chrome但没有运气。
PS: Chrome have Computed Style tab, but it does not show what style come from what CSS file. PS：Chrome有Computed Style选项卡，但它没有显示什么样的样式来自什么CSS文件。
1 个解决方案
解决方案1
6 已采纳 2013-05-27 09:44:26
In the Chrome dev tools, in the right hand column (where CSS is shown in the Elements panel), the first section is called "Computed Style". 在Chrome开发工具的右侧栏中（CSS在“元素”面板中显示），第一部分称为“计算样式”。 If you deselect "show inherited", you get a neat list of the styles that actually apply to the element. 如果取消选择“show inherited”，您将获得实际应用于该元素的样式的整齐列表。 Does that help? 这有帮助吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.