本指南假定您熟悉如何在 Chrome DevTools 中检查 CSS。要了解基础知识，请参阅查看和更改 CSS。
检查您编写的 CSS
假设您在某个元素中添加了一些 CSS，并希望确保新样式得到正确应用。当您刷新页面时，元素看起来和以前一样。出了点问题。
首先要检查元素，并确保新的 CSS 确实已应用于该元素。
有时，您会在元素 > 样式窗格中看到新 CSS，但新 CSS 呈现的是淡文本、不可修改、被划掉，或者旁边显示警告或提示图标。
了解“Styles”窗格中的 CSS
Styles 窗格可识别多种 CSS 问题，并以不同的方式突出显示这些问题。
匹配和不匹配的选择器
Styles 窗格会在常规文本中显示匹配的选择器，以浅色文本显示不匹配的选择器。
值无效和声明
Styles 窗格会划掉以下内容，并在以下内容旁边显示 
警告图标：
- CSS 属性无效或未知时，整个 CSS 声明（属性和值）。
- 在 CSS 属性有效但值无效时，仅呈现值。
已替换
Styles 窗格会根据级联顺序划掉被其他属性覆盖的属性。
在本例中，元素上的 width: 300px; 样式属性会替换 .youtube 类上的 width: 100%。
无效
Styles 窗格以浅色文字显示，并在有效但因其他属性而不起作用的属性旁边放置 
信息图标。
这些浅属性处于无效状态是由于 CSS 逻辑，而不是级联顺序。
在此示例中，display: block; 属性会停用用于控制灵活或网格布局的 justify-content 和 align-items。
继承和非继承
Styles 窗格会根据属性的默认继承关系在 Inherited from <element-name> 部分中列出属性：
- 默认情况下会以常规文本形式沿用。
- 默认情况下，非继承内容以浅文字显示。
简写
简写（简洁）属性可让您一次设置多个 CSS 属性，并使样式表更具可读性。不过，由于此类属性的简短性质，您可能会错过一个简写（精确）属性，用来替换简写暗含的属性。
Styles 窗格会将简写属性显示为 
下拉列表，其中包含所有缩短的属性。
在本示例中，四个缩短的属性中的两个实际上已被替换。
不可修改
样式窗格会以斜体文本显示无法修改的属性。例如，无法修改以下来源的 CSS：
user agent stylesheet- Chrome 的默认样式表。
元素上与样式相关的 HTML 属性，例如高度、宽度、颜色等。您可以在 DOM 树中修改这些属性，此操作会在 Styles 窗格中更新 CSS，但不会反过来。
在本例中，
<svg>元素的height="48"属性设置为50。这将更新 Styles 窗格中svg[Attributes Style]下的相应属性。
检查样式仍未达到您预期样式的元素
如需尝试找出问题所在，您可能需要检查：
- Styles 窗格中的提示中显示的 CSS 文档以及选择器特异性。
- Computed 窗格，用于查看应用于某个元素的“最终”CSS 并与您所声明的 CSS 进行比较。
元素 > 样式窗格会显示 CSS 规则集在各种样式表中编写的确切规则。另一方面，Elements > Computed 窗格会列出 Chrome 用于渲染元素的已解析 CSS 值：
了解“Computed”窗格中的 CSS
Computed 窗格也会以不同的方式显示各种属性。
声明和继承
Computed 窗格会列出任何以常规字体显示的样式表中声明的属性，包括元素自己的属性和沿用的属性。点击它们旁边的 
展开图标即可查看其来源。
如需在 Styles 窗格中查看声明，请将鼠标悬停在展开的属性上，然后点击 
箭头按钮。
如需在 Sources 窗格中查看声明，请点击指向源文件的链接。
对于具有多个来源的媒体资源，已计算窗格会先显示级联胜出者。
运行时
Computed 窗格以浅文本形式列出了运行时计算的属性值。
在此示例中，Chrome 针对 <ul> 元素计算了以下结果：
width的父项的相对路径，<div>- 相对于其子元素的
height，两个<li>元素
非继承和自定义
如需让已计算窗格显示所有属性及其值，请勾选 
全部显示。所有房源均包括：
如需将这个大型列表分为多个类别，请选中 
群组。
下例显示了 Animation 下的非继承属性的初始值，CSS 变量下的自定义属性的初始值。
搜索重复的联系人
要调查特定属性及其可能的重复项，请在过滤条件文本框中输入该属性名称。您可以在 Styles 和 Computed 窗格中执行此操作。
请参阅搜索和过滤元素的 CSS。