我正在使用谷歌Chrome的元素检查器检查网页上的h2元素和一些CSS规则-似乎被应用-是灰色的。划除似乎表明规则被覆盖,但是当样式变灰时意味着什么呢?
当前回答
这意味着该规则已经被继承,但不适用于所选元素:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
该窗格仅包含来自直接适用于所选元素的规则的属性。为了额外显示继承的属性,启用“显示继承的属性”复选框。这样的属性将以暗淡的字体显示。
实例:检查包含文本“Hello, world!”的元素
div { 保证金:0; } div# foo { margin-top: 10 px; } <div id="foo">你好,世界!< / div >
其他回答
当使用webpack时,在源代码中更改的任何css规则或属性在重新构建后重新加载页面时都是灰色的。这真的很烦人,迫使我每次都要重新加载页面。
这意味着该规则已经被继承,但不适用于所选元素:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
该窗格仅包含来自直接适用于所选元素的规则的属性。为了额外显示继承的属性,启用“显示继承的属性”复选框。这样的属性将以暗淡的字体显示。
实例:检查包含文本“Hello, world!”的元素
div { 保证金:0; } div# foo { margin-top: 10 px; } <div id="foo">你好,世界!< / div >
这意味着该规则已被另一个具有更高优先级的规则所取代。例如样式表:
h2 {
color: red;
}
h2 {
color: blue;
}
检查器将显示规则颜色:红色;灰色和颜色:蓝色;正常。
阅读CSS继承,了解哪些规则被继承/具有更高的优先级。
编辑:
混合:灰色的规则是未设置的规则,它使用一个特殊的默认样式表,应用于所有元素(使元素可呈现的规则,因为所有样式都必须有一个值)。
迈克尔·科尔曼的答案是正确的。我只是想添加一个简单的图像来配合它。他包含的链接有这样一个简单的例子:http://commandlinefanatic.com/art033ex4.html
HTML/DOM看起来是这样的…
当你选择p元素时,Chrome的样式面板看起来是这样的…
如您所见,p元素继承了它的祖先(div元素)。那么为什么风格背景色:蓝色变灰了呢?因为它是规则集的一部分,该规则集至少有一个可继承的样式。这个可继承的样式是text-indent: 1em
background-color:blue是不可继承的,但它是包含text-indent: 1em的规则集的一部分,这是可继承的,Chrome的开发人员希望在显示规则集时是完整的。但是,为了区分规则集中可继承的样式与不可继承的样式,不可继承的样式被灰色化。
如果您通过检查器添加了一个样式,但新样式没有应用到所选择的元素,也会发生这种情况。通常显示的样式只是所选元素的样式,所以灰色表示您刚刚添加的样式没有选择在DOM导航器中有焦点的元素。
推荐文章
- 如何隐藏元素而不让他们在页面上占用空间?
- CSS本地变量在媒体查询中不起作用
- 防止跨度元件断行
- 我如何能得到滚动条的位置与JavaScript?
- 如何防止滚动条重新定位网页?
- Chrome / Safari没有填充flex父控件的100%高度
- MVC4 StyleBundle不能解析图像
- 我如何能中心水平或垂直与推特引导元素?
- 如何查看或编辑localStorage?
- 当CSS规则在Chrome的元素检查器中变灰时,这意味着什么?
- 对多行文本应用省略号
- 如何隐藏图像破碎的图标只使用CSS/HTML?
- 打印预览中不显示背景色
- 如何在两列中显示无序列表?
- 如何将console.log(对象)的输出保存到文件?