Chrome 开发者工具 第七章（CSS无效、被覆盖、继承）

在前端开发过程中，我们经常会遇到CSS样式没有按预期显示的情况。这可能是由于多种原因造成的，比如CSS规则的选择器不匹配、属性值无效或者CSS声明被其他规则覆盖。Chrome开发者工具的样式窗格提供了一系列功能，帮助我们识别和理解这些问题。

当你发现你添加的CSS没有生效时，你需要检查元素面板中的样式窗格，确认新的CSS是否已经被应用到元素上。如果你在样式窗格中看到新的CSS呈现为浅色文本、不可编辑或者被划掉，或者旁边有警告或提示图标，这通常意味着出现了一些问题。

样式窗格会以常规文本显示匹配的选择器，而不匹配的选择器则会以浅色文本显示。

如果CSS属性无效或未知，或者属性值无效，整个CSS声明或仅值本身会被划掉，并显示警告图标。

此外，被其他属性覆盖的属性也会被划掉，以表明它们已被替换。

某些属性虽然有效，但由于CSS逻辑而没有任何影响，这些属性会以浅色文本显示，并在旁边放置信息图标。

样式窗格还会区分继承的属性和非继承的属性，其中默认继承的属性以常规文本显示，非继承的属性则以浅色文本显示。

简写属性在样式窗格中以下拉菜单形式显示，这可能导致你遗漏一些会覆盖简写形式的完整属性。

而无法修改的属性，如用户代理样式表中的CSS或元素上与样式相关的HTML属性，会以斜体文本显示。

如果你需要进一步调查为什么元素的样式没有按预期显示，你可以查看计算样式窗格，它列出了应用到元素的最终CSS值。计算样式窗格会显示样式表中声明的属性，包括继承的属性和在运行时计算的属性值。此外，你还可以查看所有属性及其值，包括非继承属性的初始值和自定义属性。

当你需要搜索特定属性及其可能的重复项时，你可以在样式和计算样式窗格中的过滤条件文本框中输入属性名称。

通过这些工具，你可以更好地理解CSS问题，并找到解决方案，确保你的网页样式按照你的设计显示。