当前位置：文江博客话题详情

当 CSS 规则在 Chrome 的元素检查器中显示为灰色时，这意味着什么？

发布于 2024-09-10 08:27:33 字数 110 浏览 13 评论 0 原文

我正在使用 Google Chrome 的元素检查器检查网页上的 h2 元素，并且一些似乎已应用的 CSS 规则呈灰色显示。看起来删除线表示规则被覆盖，但是当样式变灰时意味着什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〃温暖了心ぐ 2024-09-17 08:27:33

对我来说，当前的答案并没有充分解释这个问题，所以我添加了这个答案，希望对其他人有用。

灰色/变暗的文本可能意味着

它是浏览器应用的默认规则/属性，其中包括默认的速记属性。
它涉及到继承，这有点复杂。

继承

注意事项：Chrome 开发工具的“样式”面板将显示一个规则集，因为该集中的一个或多个规则正在应用于当前选定的 DOM 节点。
我想，为了完整起见，开发工具显示了该集中的所有规则，无论它们是否应用。

如果由于继承而将规则应用于当前选定的元素（即规则应用于祖先，并且选定的元素继承了它），chrome 将再次显示整个规则集。

应用于当前选定元素的规则以普通文本显示。

如果该规则集中存在某个规则，但由于它是不可继承的属性（例如背景颜色）而未应用，则该规则将显示为灰色/变暗的文本。

这是一篇给出了很好解释的文章 - （注意：相关项目位于文章底部 - 图 21 - 不幸的是相关部分没有标题） -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

文章摘录

这种[继承场景]偶尔会产生一些混乱，因为默认
速记属性；图 21 说明了默认的简写
字体属性以及非继承属性
特性。只要注意你正在查看的上下文即可
检查元素。

回复收藏 0 原文

别闹i 2024-09-17 08:27:33

迈克尔科尔曼有正确的答案。我只想添加一个简单的图像来配合它。他包含的链接有一个简单的示例： http://commandlinefanatic.com/art033ex4.html

HTML /DOM 看起来像这样...

当您选择 p 元素时，Chrome 中的样式窗格如下所示...

如您所见，p 元素继承自其祖先（div）。那么为什么样式 background-color: blue 是灰色的呢？因为它是至少具有一种可继承样式的规则集的一部分。可继承的样式是 text-indent: 1em

background-color:blue 不可继承，但它是包含 text-indent: 1em< 的规则集的一部分/code> 是不可继承的，Chrome 的开发者希望在显示规则集时是完整的。但是，为了区分规则集中可继承的样式和不可继承的样式，不可继承的样式将显示为灰色。

回复收藏 0 原文

想念有你 2024-09-17 08:27:33

如果您通过检查器添加样式，但该新样式不适用于您选择的元素，也会发生这种情况。通常显示的样式只是所选元素的样式，因此灰色表示您刚刚添加的样式没有选择 DOM 导航器中具有焦点的元素。

回复收藏 0 原文

妄司 2024-09-17 08:27:33

这意味着该规则已被另一个具有更高优先级的规则替换。例如样式表具有：

h2 {
  color: red;
}
h2 {
  color: blue;
}

检查器将显示规则 color:red; 灰显和 color:blue; 正常。

阅读 CSS 继承，了解哪些规则被继承/具有更高的优先级。

编辑：

混合：灰色的规则是未设置的规则，它们使用应用于所有元素的特殊默认样式表（使元素可渲染的规则，因为所有样式必须有一个值）。

It means the rule has been replaced with another rule with higher priority. For example stylesheets with:

h2 {
  color: red;
}
h2 {
  color: blue;
}

The inspector will show the rule color:red; grayed out and color:blue; normally.

Read up on CSS inheritance to learn which rules are inherited/have higher priority.

EDIT:

Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).

回复收藏 0 原文

你的他你的她 2024-09-17 08:27:33

使用 webpack 时，当页面重建后重新加载时，源代码中已更改的任何 css 规则或属性都会变灰。这真的很烦人，迫使我每次都重新加载页面。

回复收藏 0 原文

埋情葬爱 2024-09-17 08:27:33

新版本的chrome开发者显示了它继承自哪里。

回复收藏 0 原文

风透绣罗衣 2024-09-17 08:27:33

我在这个问题已经有很多正确答案之后很久才回答，因为我遇到了另一种情况，即在 Chome DevTools 中 CSS 代码块变灰且不可编辑：有问题的块包含 U+200B 零宽度空格字符。一旦我找到这些并删除它们，我就可以再次在 Chrome DevTools 中编辑该块。想必这也可能发生在其他非 ASCII 字符上，我还没有试图弄清楚这一点。