在本全面的参考文档中，了解与查看和更改 CSS 相关的 Chrome 开发者工具功能。
如需了解基本知识，请参阅查看和更改 CSS。
选择元素
您可以通过开发者工具的元素面板一次查看或更改一个元素的 CSS。
在屏幕截图中，DOM 树中以蓝色突出显示的 h1 元素是所选元素。在右侧的样式标签页中，会显示该元素的样式。在左侧，该元素在视口中突出显示，但这只是因为鼠标在 DOM 树中悬停在该元素上。
如需查看教程，请参阅查看元素的 CSS。
您可以通过多种方式选择元素：
- 在视口中，右键点击相应元素，然后选择检查。
- 在 DevTools 中，点击选择元素图标
，或按 Command+Shift+C（Mac）或 Control+Shift+C（Windows、Linux），然后点击视口中的元素。
- 在开发者工具中，点击 DOM Tree 中的元素。
- 在开发者工具中，在控制台中运行
document.querySelector('p')等查询，右键点击结果，然后选择在“Elements”面板中展开。
，或按 Command+Shift+C（Mac）或 Control+Shift+C（Windows、Linux），然后点击视口中的元素。查看 CSS
依次选择 Elements（元素）> Styles（样式）和 Computed（计算出的样式属性）标签页，即可查看 CSS 规则并诊断 CSS 问题。
使用链接导航
样式标签页会显示各种位置指向其他各种位置的链接，包括但不限于：
- 接下来是 CSS 规则、样式表和 CSS 来源。此类链接会打开来源面板。如果样式表已缩减，请参阅使缩减后的文件可读。
- 在继承自...部分中，将其更改为父元素。
- 在
var()调用中，指向自定义属性声明。 - 在
animation缩写属性中，为@keyframes。 - 文档提示中的了解详情链接。
- 以及其他凭证。
下面突出显示了其中一些功能：
链接的样式可能会有所不同。如果您不确定某个内容是否为链接，请尝试点击它来确认。
查看包含 CSS 文档、专属性和自定义属性值的提示
当您将鼠标悬停在特定元素上时，元素 > 样式会显示包含实用信息的提示。
查看 CSS 文档
如需查看包含简短 CSS 说明的提示，请将鼠标悬停在样式标签页中的属性名称上。
点击了解详情可前往此属性的 MDN CSS 参考文档。
如需关闭提示，请选中 不显示。
如需重新启用这些功能，请依次选择 设置 > 偏好设置 > 元素 >
显示 CSS 文档提示。
视图选择器的具体性
将鼠标悬停在选择器上，即可看到包含其特异性权重的提示。
查看自定义属性的值
将鼠标悬停在 --custom-property 上，即可在提示中查看其值。
查看无效、被替换、无效和其他 CSS
样式标签页可识别多种 CSS 问题，并以不同的方式突出显示这些问题。
请参阅了解“样式”标签页中的 CSS。
仅查看实际应用于元素的 CSS
样式标签页会显示应用于元素的所有规则，包括已被替换的声明。如果您不感兴趣了解被替换的声明，请使用计算标签页，仅查看实际应用于元素的 CSS。
- 选择一个元素。
- 前往元素面板中的计算标签页。
勾选全部显示复选框可查看所有媒体资源。
按字母顺序查看 CSS 属性
使用计算标签页。请参阅仅查看实际应用于元素的 CSS。
查看继承的 CSS 属性
勾选计算标签页中的全部显示复选框。请参阅仅查看实际应用于元素的 CSS。
或者，滚动样式标签页，找到名为 Inherited from <element_name> 的部分。
查看 CSS at-rule
At 规则是 CSS 语句，可用于控制 CSS 行为。元素 > 样式会在专用部分中显示以下 at-rule：
查看 @property at-rule
借助 @property CSS at 规则，您可以明确定义 CSS 自定义属性并将其注册在样式表中，而无需运行任何 JavaScript。
将鼠标悬停在样式标签页中此类属性的名称上，即可在样式标签页底部的可收起的 @property 部分中看到包含属性值、描述符以及指向其注册链接的提示。
如需修改 @property 规则，请双击其名称或值。
查看 @supports at-rule
如果 @supports CSS at-rule 应用于某个元素，样式标签页会显示该 at-rule。例如，请检查以下元素：
如果您的浏览器支持 lab() 函数，该元素为绿色；否则，该元素为紫色。
查看 @scope at-rule
如果CSS @scope at-rule 已应用于某个元素，样式标签页会显示该 at-rule。
新的 @scope at 规则属于 CSS 层叠和继承第 6 级规范的一部分。借助这些规则，您可以限定 CSS 样式的范围，也就是说，明确地将样式应用于特定元素。
在以下预览中查看 @scope 规则：
- 在预览中检查卡片上的文本。
- 在 Styles（样式）标签页中，找到
@scope规则。
在此示例中，@scope 规则会替换具有 card 类的元素内所有 <p> 元素的全局 CSS background-color 声明。
如需修改 @scope 规则，请对其双击。
查看 @font-palette-values at-rule
借助 @font-palette-values CSS at 规则，您可以自定义 font-palette 属性的默认值。元素 > 样式会在专门的部分中显示此 at 规则。
在下一个预览中查看 @font-palette-values 部分：
- 在预览中检查第二行文本。
- 在样式中，找到
@font-palette-values部分。
在此示例中，--New 字体调色板值会替换彩色字体的默认值。
如需修改自定义值，请双击相应值。
查看 @position-try at-rule
借助 @position-try CSS 规则和 position-try-options 属性，您可以为元素定义备选锚点位置。如需了解详情，请参阅CSS 锚点定位 API 简介。
元素 > 样式 - 解析并关联以下内容：
position-try-options属性值到专用的@position-try --name部分。position-anchor属性值和anchor()参数（对应于具有popovertarget属性的元素）。
在下一个预览中检查 position-try-options 值和 @position-try 部分：
popover 的锚点演示- 在预览中，打开子菜单，即依次点击您的账号和商店。
- 在预览中使用
id="submenu"检查元素。 - 在样式中，找到
position-try-options属性，然后点击其--bottom值。样式标签页会将您带到相应的@position-try部分。 - 点击
position-anchor值链接或相同的anchor()实参。Elements 面板会选择具有相应popovertarget属性的元素，而 Styles 标签页会显示该元素的 CSS。
如需修改值，请双击相应值。
查看元素的盒模型
如需查看元素的盒模型，请前往样式标签页，然后点击操作栏中的 
如需更改某个值，请双击该值。
搜索和过滤元素的 CSS
使用样式和计算标签页上的过滤条件框搜索特定 CSS 属性或值。
如需在计算出的样式属性标签页中搜索继承的属性，请选中全部显示复选框。
如需浏览计算标签页，请选中分组，将过滤后的房源分组到可收起的类别中。
模拟已聚焦的网页
如果您将焦点从网页切换到 DevTools，某些叠加层元素会自动隐藏，前提是这些元素是通过焦点触发的。例如，下拉列表、菜单或日期选择器。借助 模拟已聚焦的网页选项，您可以像调试聚焦的元素一样调试此类元素。
请尝试在此演示页面上模拟已聚焦的网页：
- 将焦点移至输入元素。下方会显示另一个元素。