我正在使用谷歌Chrome的元素检查器检查网页上的h2元素和一些CSS规则-似乎被应用-是灰色的。划除似乎表明规则被覆盖,但是当样式变灰时意味着什么呢?
当前回答
在这个问题已经有很多正确答案之后,我回答了很长时间,因为我遇到了一个不同的情况,在Chome DevTools中有一个CSS代码块变灰并且不可编辑:该块包含U+200B ZERO WIDTH SPACE字符。一旦我找到这些并删除它们,我就可以再次在Chrome DevTools中编辑该块。这大概也会发生在其他非ascii字符上,我还没有试图弄清楚。
其他回答
这意味着该规则已被另一个具有更高优先级的规则所取代。例如样式表:
h2 {
color: red;
}
h2 {
color: blue;
}
检查器将显示规则颜色:红色;灰色和颜色:蓝色;正常。
阅读CSS继承,了解哪些规则被继承/具有更高的优先级。
编辑:
混合:灰色的规则是未设置的规则,它使用一个特殊的默认样式表,应用于所有元素(使元素可呈现的规则,因为所有样式都必须有一个值)。
在这个问题已经有很多正确答案之后,我回答了很长时间,因为我遇到了一个不同的情况,在Chome DevTools中有一个CSS代码块变灰并且不可编辑:该块包含U+200B ZERO WIDTH SPACE字符。一旦我找到这些并删除它们,我就可以再次在Chrome DevTools中编辑该块。这大概也会发生在其他非ascii字符上,我还没有试图弄清楚。
如果您通过检查器添加了一个样式,但新样式没有应用到所选择的元素,也会发生这种情况。通常显示的样式只是所选元素的样式,所以灰色表示您刚刚添加的样式没有选择在DOM导航器中有焦点的元素。
当使用webpack时,在源代码中更改的任何css规则或属性在重新构建后重新加载页面时都是灰色的。这真的很烦人,迫使我每次都要重新加载页面。
新版本的chrome开发人员显示它从哪里继承。
推荐文章
- 使伸缩项目正确浮动
- 卸载Chrome开发工具
- 如何取消最大高度?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 设备像素比到底是什么?