这是什么意思时，CSS规则是在Chrome的元素督察灰色的？ [英] What does it mean when a CSS rule is grayed out in Chrome's element inspector?

问题描述

这似乎适用 - - 是灰色的

我使用谷歌Chrome浏览器的元素督察和一些CSS规则网页上的检查 H2 元素。看来，罢工通表示的规则已被重写，但到底是什么意思时，一个款式是灰色的？

解决方案

这意味着规则一直延续下来，但并不适用于选定的元素：

的http://$c$c.google.com/chrome/devtools/docs/elements-styles.html#computed_style

  

该窗格包含来自直接适用于所选择的元素的规则只属性。为了附加显示继承属性，使显示继承复选框。 这些属性将显示在一个昏暗的字体。

活生生的例子：你好，世界检查元素包含文本

\r

\r

DIV {\r
  保证金：0;\r
}\r
\r
DIV＃{富\r
  的margin-top：10px的;\r
}

\r

＆LT; D​​IV ID =foo的＆GT;！您好，世界＆LT; / DIV＆GT;

\r

\r

\r

I'm inspecting an h2 element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?

解决方案

It means that the rule has been inherited, but is not applicable to the selected element:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.

Live example: inspect the element containing the text "Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

这篇关于这是什么意思时，CSS规则是在Chrome的元素督察灰色的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！