当 DevTools 告诉您某个声明无效时，这很有用。例如，colr: red; 无效，因为 colr 不是有效的属性。同样，color: rd; 无效，因为 rd 不是有效的值。在大多数情况下，浏览器的 DevTools 会将声明显示为带删除线的文本，并带有警告 (
) 图标。如果它们更进一步，告诉您哪个（或两个）地方出错，并建议可能的修复方法，那就太好了，但是，我不想得了便宜还卖乖。
Firefox 正在更进一步地告诉您某些声明何时无效，这并不是因为语法错误，而是因为它们不符合其他条件。例如，我在一个随机的 <p> 上添加了一个 grid-column-gap: 1rem，然后我收到一个小的弹出窗口提示
grid-column-gap对此元素没有影响，因为它不是弹性容器、网格容器或多列容器。尝试添加
display:grid、display:flex或columns:2。 了解更多
这真是太方便了。
Elijah Manor 有 一篇博文 和视频深入探讨了这一点。