为啥 Chrome 检查器中的 CSS 规则显示为灰色 [重复]

Posted 2023-03-06

【中文标题】为啥 Chrome 检查器中的 CSS 规则显示为灰色 [重复]

【英文标题】：Why is a CSS rule grayed out in Chrome inspector [duplicate]为什么 Chrome 检查器中的 CSS 规则显示为灰色 [重复]

【发布时间】：2019-07-18 23:13:36

【问题描述】：

我正在尝试编辑一个元素，但由于某种原因，我需要编辑的样式显示为灰色。这可能是什么原因造成的？ other question 似乎没有解决这种情况。

【问题讨论】：

我认为是内联样式？

参见 crbug.com/922181 - 如果规则集是通过编程方式创建的，则会在 Chrome 中发生。

***.com/questions/3265555/… [重复]

@AndrewKovalchuk 我提到了另一个问题，它似乎没有解决这种情况 - 答案中的灰色规则是用户代理样式表，而在我的情况下它是自定义样式。

关闭 Chrome 并重新打开。拉了一些头发后为我工作。

【参考方案1】：

这意味着该规则被其他规则覆盖。

在您的情况下，所有前缀规则 (-webkit/-moz...) 都被标准 user-select 规则覆盖。

【讨论】：

Chrome ignores -moz、-ms 等完全以规则为前缀，因为它们根本不适合 Chrome，所以它并没有被覆盖。它确实监听-webkit前缀，因为它是基于Webkit的。

【参考方案2】：

划线的样式被另一个 CSS 规则覆盖 灰色文本是未应用的规则（例如，为其他浏览器预先固定） 灰色背景表示无法在检查器中编辑的只读样式。

请参阅此Question 了解更多详情。 Chrome 开发工具documentation

【讨论】：

我在该问题或文档中找不到任何解释为什么该样式被视为只读的内容。我知道它是只读的，因为我无法编辑它，但这并不能解释为什么我无法编辑它。

我已经在那里添加了一个真实的答案。

谢谢，我看到了。猜猜它毕竟是一个错误。