我正在使用谷歌Chrome的元素检查器检查网页上的h2元素和一些CSS规则-似乎被应用-是灰色的。划除似乎表明规则被覆盖,但是当样式变灰时意味着什么呢?
当前回答
新版本的chrome开发人员显示它从哪里继承。
其他回答
这意味着该规则已被另一个具有更高优先级的规则所取代。例如样式表:
h2 {
color: red;
}
h2 {
color: blue;
}
检查器将显示规则颜色:红色;灰色和颜色:蓝色;正常。
阅读CSS继承,了解哪些规则被继承/具有更高的优先级。
编辑:
混合:灰色的规则是未设置的规则,它使用一个特殊的默认样式表,应用于所有元素(使元素可呈现的规则,因为所有样式都必须有一个值)。
在这个问题已经有很多正确答案之后,我回答了很长时间,因为我遇到了一个不同的情况,在Chome DevTools中有一个CSS代码块变灰并且不可编辑:该块包含U+200B ZERO WIDTH SPACE字符。一旦我找到这些并删除它们,我就可以再次在Chrome DevTools中编辑该块。这大概也会发生在其他非ascii字符上,我还没有试图弄清楚。
新版本的chrome开发人员显示它从哪里继承。
对我来说,目前的答案并没有充分解释这个问题,所以我添加了这个答案,希望对其他人有用。
灰色/暗淡的文本,可以是任何一种意思
这是浏览器应用的默认规则/属性,其中包括默认的简短属性。 它涉及到继承,这有点复杂。
继承
注意:Chrome开发工具“style”面板将显示一个规则集,因为集合中的一个或多个规则被应用到当前选择的DOM节点。 我想,出于完整性的考虑,开发工具显示了该集合中的所有规则,无论它们是否被应用。
在由于继承而将规则应用到当前所选元素的情况下(即规则应用于祖先,所选元素继承了它),chrome将再次显示整个规则集。
应用于当前选定元素的规则以普通文本形式显示。
如果一个规则存在于该集合中,但因为它是一个不可继承的属性(例如背景色)而没有应用,它将显示为灰色/暗色文本。
这里有一篇文章给出了很好的解释-(注意:相关项目在文章的底部-图21 -不幸的是相关部分没有标题)-http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
文章节选
这个[继承场景]偶尔会造成一些混乱,因为是默认的 速记性质;图21展示了默认的速记 属性的字体属性和非继承的 属性。只要注意你所看到的环境 检查元素。
迈克尔·科尔曼的答案是正确的。我只是想添加一个简单的图像来配合它。他包含的链接有这样一个简单的例子:http://commandlinefanatic.com/art033ex4.html
HTML/DOM看起来是这样的…
当你选择p元素时,Chrome的样式面板看起来是这样的…
如您所见,p元素继承了它的祖先(div元素)。那么为什么风格背景色:蓝色变灰了呢?因为它是规则集的一部分,该规则集至少有一个可继承的样式。这个可继承的样式是text-indent: 1em
background-color:blue是不可继承的,但它是包含text-indent: 1em的规则集的一部分,这是可继承的,Chrome的开发人员希望在显示规则集时是完整的。但是,为了区分规则集中可继承的样式与不可继承的样式,不可继承的样式被灰色化。
推荐文章
- Chrome:网站使用HSTS。网络错误……这个页面稍后可能会工作
- 什么是“升级-不安全-请求”HTTP报头?
- 如何删除/忽略:悬停css风格的触摸设备
- 如何验证一个XPath表达式在Chrome开发工具或Firefox的Firebug?
- 为iPad和iPhone设计输入按钮
- 如何删除所有断点在谷歌Chrome一步?
- Div高度100%,并扩展到适合内容
- 当鼠标经过表中的一行时,将光标更改为手
- 使用:before和:after CSS选择器插入HTML
- 禁用从HTML页面中拖动图像
- CSS水平定心固定div?
- 如何样式dt和dd,使他们在同一行?
- 将最后一个伸缩项定位在容器的末尾
- 导入。css文件到。less文件
- 从超链接中删除所有样式/格式