在这份全面的参考文档中，您可以了解与查看和更改 CSS 相关的 Chrome 开发者工具功能，探索新的工作流程。
如需了解基本知识，请参阅查看和更改 CSS。
选择元素
借助开发者工具的元素面板，您可以一次查看或更改一个元素的 CSS。
在屏幕截图中，DOM 树中以蓝色突出显示的 h1 元素是所选元素。右侧的样式标签页中会显示元素的样式。在左侧，元素在视口中突出显示，但这仅仅是因为鼠标悬停在 DOM 树中的相应元素上。
如需查看相关教程，请参阅查看元素的 CSS。
您可以通过多种方式选择元素：
- 在视口中，右键点击相应元素，然后选择检查。
- 在开发者工具中，点击选择元素图标
，或按 Command+Shift+C 组合键 (Mac) 或 Control+Shift+C 组合键 (Windows、Linux)，然后点击视口中的相应元素。 - 在开发者工具中，点击 DOM 树中的相应元素。
- 在开发者工具中，在控制台中运行类似
document.querySelector('p')的查询，右键点击结果，然后选择在“元素”面板中显示。
查看 CSS
使用元素 > 样式和计算出的样式属性标签页可查看 CSS 规则并诊断 CSS 问题。
使用链接进行导航
样式标签页中的链接会显示在各种位置，指向各种其他位置，包括但不限于：
- CSS 规则、样式表和 CSS 来源。此类链接会打开来源面板。如果样式表经过了精简，请参阅使精简文件可读。
- 在继承自 … 部分中，指向父元素。
- 在
var()调用中，到自定义属性声明。 - 在
animation简写属性中，为@keyframes。 - 文档工具提示中的了解详情链接。
- 以及更多精彩内容。
以下突出显示了其中一些：
链接的样式可能会有所不同。如果您不确定某内容是否为链接，请尝试点击该内容以进行确认。
查看包含 CSS 文档、特异性和自定义属性值的提示
元素 > 样式：当您将鼠标悬停在特定元素上时，系统会显示包含实用信息的提示。
查看 CSS 文档
如需查看包含简短 CSS 说明的提示，请将鼠标悬停在样式标签页中的属性名称上。
点击了解详情，前往有关此属性的 MDN CSS 参考文档。
如需关闭提示，请选中 
不显示。
如需重新启用这些提示，请依次选择 
设置 > 偏好设置 > 元素 > 
显示 CSS 文档提示。
查看选择器特异性
将鼠标悬停在选择器上，即可查看包含其特异性权重的提示。
查看自定义属性的值
将鼠标悬停在 --custom-property 上，即可在提示中查看其值。
查看无效、被替换、无效和其他 CSS
样式标签页可识别多种 CSS 问题，并以不同方式突出显示这些问题。
请参阅了解“样式”标签页中的 CSS。
仅查看实际应用于元素的 CSS
样式标签页会显示应用于元素的所有规则，包括已被覆盖的声明。如果您对被替换的声明不感兴趣，可以使用计算后标签页只能查看实际应用于元素的 CSS。
- 选择一个元素。
- 前往元素面板中的计算后标签页。
勾选全部显示复选框即可查看所有属性。
按字母顺序查看 CSS 属性
使用计算标签页。请参阅仅查看实际应用于元素的 CSS。
查看继承的 CSS 属性
在 Computed 标签页中，选中 Show All 复选框。请参阅仅查看实际应用于元素的 CSS。
或者，滚动样式标签页，找到名为 Inherited from <element_name> 的部分。
查看 CSS at 规则
at 规则是 CSS 语句，可用于控制 CSS 行为。元素 > 样式会在专用部分中显示以下 @ 规则：
查看 @property at 规则
借助 @property CSS at-rule，您可以明确定义 CSS 自定义属性，并在样式表中注册这些属性，而无需运行任何 JavaScript。
将鼠标悬停在样式标签页中此类属性的名称上，即可看到一个工具提示，其中包含该属性的值、描述符以及指向其在样式标签页底部可折叠的 @property 部分中的注册信息的链接。
如需修改 @property 规则，请双击其名称或值。
查看 @supports at 规则
样式标签页会显示 @supports CSS at-rules（如果已应用于某个元素）。例如，检查以下元素：
如果您的浏览器支持 lab() 函数，则该元素为绿色；否则，该元素为紫色。
查看 @scope at 规则
样式标签页会显示是否为元素应用了 CSS @scope at-rules。
新的 @scope at-rules 是 CSS 层叠和继承第 6 级规范的一部分。借助这些规则，您可以限定 CSS 样式的范围，换句话说，可以明确地将样式应用于特定元素。
在以下预览中查看 @scope 规则：
在此示例中，@scope 规则会替换具有 card 类的元素内所有 <p> 元素的全局 CSS background-color 声明。
如需修改 @scope 规则，请双击该规则。
查看 @font-palette-values at 规则
借助 @font-palette-values CSS @ 规则，您可以自定义 font-palette 属性的默认值。元素 > 样式会在专用部分中显示此 @规则。
查看下一个预览中的 @font-palette-values 部分：
- 检查预览中的第二行文字。
- 在样式中，找到
@font-palette-values部分。
在此示例中，--New 字体调色板值会替换彩色字体的默认值。
如需修改自定义值，请双击相应值。
查看 @position-try at 规则
借助 @position-try CSS 规则和 position-try-options 属性，您可以为元素定义替代锚定位置。如需了解详情，请参阅 CSS 锚定位 API 简介。
元素 > 样式 可解析并关联以下内容：
position-try-options属性值移至专用@position-try --name部分。position-anchor属性值和具有popovertarget属性的相应元素的anchor()实参。
检查下一个预览版中的 position-try-options 值和 @position-try 部分：
popover- 在预览中，打开子菜单，即依次点击您的账号和店面。
- 在预览中检查带有
id="submenu"的元素。 - 在样式中，找到
position-try-options属性，然后点击其--bottom值。样式标签页可将您带到相应的@position-try部分。 - 点击
position-anchor值链接或相同的anchor()实参。元素面板会选择具有相应popovertarget属性的元素，而样式标签页会显示该元素的 CSS。
如需修改值，请双击相应值。
查看元素的盒模型
如需查看元素的盒模型，请前往样式标签页，然后点击操作栏中的 
显示边栏按钮。
如需更改某个值，请双击该值。
搜索和过滤元素的 CSS
使用样式和计算标签页上的过滤条件框搜索特定的 CSS 属性或值。
如需在计算出的样式属性标签页中搜索继承的属性，请选中全部显示复选框。
如需浏览计算标签页，请选中分组，将过滤后的属性归入可折叠的类别中。
模拟所聚焦的网页
如果您将焦点从网页切换到 DevTools，则由焦点触发的某些叠加层元素会自动隐藏。例如，下拉列表、菜单或日期选择器。借助 模拟已聚焦的网页选项，您可以调试此类元素，就好像它处于聚焦状态一样。
尝试在此演示页面上模拟所聚焦的网页：
- 聚焦输入元素。下方会显示另一个元素。
- 打开开发者工具。现在，开发者工具窗口处于焦点状态，而不是网页，因此该元素再次消失。
- 在 Elements > Styles 中，点击 :hov，选中 Emulate a focused page，并确保已选择输入元素。现在，您可以检查该元素下的元素了。
您还可以在 Rendering 面板中找到相同的选项。
如需了解冻结元素的更多方法，请参阅冻结屏幕并检查消失的元素。
切换伪类
如需切换伪类，请执行以下操作：
- 选择一个元素。
- 在元素面板中，前往样式标签页。
- 点击 :hov。
- 选中要开启的伪类。
在此示例中，您可以看到，即使元素实际上并未被悬停，开发者工具仍会将 background-color 声明应用于该元素。
样式标签页会显示所有元素的以下伪类：
此外，某些元素可能具有自己的伪类。选择此类元素后，样式标签页会显示强制指定元素状态部分，您可以展开该部分并开启特定于相应元素的伪类。
如需查看互动教程，请参阅向类添加伪状态。
查看继承的突出显示伪元素
借助伪元素，您可以设置元素的特定部分的样式。突出显示伪元素是具有“已选择”状态的文档部分，它们会以“突出显示”样式呈现，以便向用户指示此状态。例如，此类伪元素包括 ::selection、::spelling-error、::grammar-error 和 ::highlight。
如规范中所述，当多个样式发生冲突时，层叠会确定胜出的样式。
为了更好地了解规则的继承和优先级，您可以查看继承的突出显示伪元素：
-
我继承了父级突出显示伪元素的样式。Select me!
选择上文中的一部分文字。
在样式标签页中，向下滚动以找到
Inherited from ::selection pseudo of...部分。
查看级联层
借助级联层，您可以更明确地控制 CSS 文件，以防止样式特异性冲突。这对于大型代码库、设计系统以及在应用中管理第三方样式非常有用。
如需查看级联层，请检查下一个元素，然后打开 Elements > Styles。
在样式标签页中，查看 3 个级联层及其样式：page、component 和 base。
如需查看图层顺序，请点击图层名称或 
切换 CSS 图层视图按钮。
page 层的特异性最高，因此元素的背景为绿色。
以打印模式查看网页
如需在打印模式下查看网页，请执行以下操作：
- 打开命令菜单。
- 开始输入
Rendering并选择Show Rendering。 - 在模拟 CSS 媒体下拉菜单中，选择 print。
使用“覆盖率”标签页查看已用和未用的 CSS
“覆盖率”标签页会显示网页实际使用的 CSS。
- 在开发者工具处于焦点状态时，按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、ChromeOS），打开命令菜单。
开始输入
coverage。
选择显示覆盖率。系统随即会显示“覆盖率”标签页。
点击
重新加载。
页面会重新加载，而覆盖率标签页会提供概览，显示浏览器加载的每个文件中使用了多少 CSS（和 JavaScript）。
绿色表示已使用的 CSS。红色表示未使用的 CSS。
点击某个 CSS 文件，即可在上面的预览中看到该文件使用的 CSS 的逐行细分。
在屏幕截图中，
devsite-google-blue.css的第 55 至 57 行和第 65 至 67 行未使用，而第 59 至 63 行已使用。
强制进入打印预览模式
请参阅强制将开发者工具设为打印预览模式。
复制 CSS
在样式标签页的单个下拉菜单中，您可以复制单独的 CSS 规则、声明、属性、值
此外，您还可以复制 JavaScript 语法中的 CSS 属性。如果您使用的是 CSS-in-JS 库，此选项会非常有用。
复制 CSS：
- 选择一个元素。
- 在元素 > 样式标签页中，右键点击某个 CSS 属性。
从下拉菜单中选择以下任一选项：
- 复制声明。以 CSS 语法复制属性及其值：
css property: value; - 复制媒体资源。仅复制
property名称。 - 复制值。仅复制
value。 - 复制规则。复制整个 CSS 规则：
css selector[, selector] { property: value; property: value; ... } - 以 JS 格式复制声明。以 JavaScript 语法复制属性及其值：
js propertyInCamelCase: 'value' - 复制所有声明。复制 CSS 规则中的所有属性及其值：
css property: value; property: value; ... 以 JS 格式复制所有声明。以 JavaScript 语法复制所有属性及其值： ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', …
复制所有 CSS 更改。将您在样式标签页中所做的更改复制到所有声明中。
查看计算得出的值。前往计算标签页。
- 复制声明。以 CSS 语法复制属性及其值：
更改 CSS
本部分列出了在 Elements > Styles 中更改 CSS 的所有方法。
此外，您可以：
通过代码补全更改 CSS
如需尝试使用更复杂的 CSS 属性组合（例如渐变或框阴影），而无需记住其确切的语法，或者快速构建网格和 flex 布局（依赖于多个相关属性），您可以开始输入 CSS 属性并使用代码补全功能。
向元素添加 CSS 声明
由于声明的顺序会影响元素的样式设置，因此您可以采用不同的方式添加声明：
您应该使用什么工作流程？在大多数情况下，您可能希望使用内嵌声明工作流。内嵌声明比外部声明具有更高的特异性，因此内嵌工作流可确保更改在元素中按预期生效。如需详细了解明确性，请参阅选择器类型。
如果您要调试元素的样式，并且需要专门测试在不同位置定义声明时会发生什么情况，请使用其他工作流程。
添加内嵌声明
如需添加内嵌声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，点击 element.style 部分的方括号之间。光标会聚焦，以便您输入文字。
- 输入属性名称，然后按 Enter 键。
为相应属性输入有效值，然后按 Enter 键。在 DOM 树中，您可以看到该元素已添加
style属性。
在屏幕截图中，
margin-top和background-color属性已应用于所选元素。在 DOM 树中，您可以看到声明反映在元素的style属性中。
向样式规则添加声明
如需向现有样式规则添加声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，点击要添加声明的样式规则的方括号之间。光标会聚焦，以便您输入文字。
- 输入属性名称，然后按 Enter 键。
- 为相应属性输入有效值，然后按 Enter 键。
在屏幕截图中，样式规则获得了新的 border-bottom-style:groove 声明。
更改声明名称或值
双击声明的名称或值即可更改。如需了解可快速将值增加或减少 0.1、1、10 或 100 个单位的快捷键，请参阅使用键盘快捷键更改可枚举的值。
使用键盘快捷键更改可枚举的值
在修改声明的可枚举值（例如 font-size）时，您可以使用以下键盘快捷键按固定量递增值：
- Option+向上键 (Mac) 或 Alt+向上键 (Windows、Linux) 可将值增加 0.1。
- 向上可将值更改 1，如果当前值介于 -1 和 1 之间，则更改 0.1。
- Shift+向上键可将值增加 10。
- Shift+Command+向上键 (Mac) 或 Control+Shift+Page Up（Windows、Linux）可将值增加 100。
递减也有效。只需将前面提到的每个 Up 实例替换为 Down 即可。
更改长度值
您可以使用指针更改任何具有长度的属性，例如宽度、高度、内边距、外边距或边框。
如需更改长度单位，请执行以下操作：
- 将鼠标悬停在单元名称上，您会发现该名称带有下划线。
点击单位名称，然后从下拉菜单中选择一个单位。
如需更改长度值，请执行以下操作：
- 将光标悬停在单位值上，您会发现光标变为水平双向箭头。
水平拖动可增大或减小值。
如需将值调整 10，请在拖动时按住 Shift 键。
向元素添加类
如需向元素添加类，请执行以下操作：
- 在 DOM 树中选择相应元素。
- 点击 .cls。
- 在添加新课程框中输入课程名称。
- 按 Enter 键。
模拟浅色和深色主题偏好设置，并启用自动深色模式
如需切换自动深色模式或模拟用户对浅色或深色主题的偏好，请执行以下操作：
- 在元素 > 样式标签页中，点击
切换常见渲染模拟。
从下拉列表中选择以下任一选项：
- prefers-color-scheme: light。表示用户偏好浅色主题。
- prefers-color-scheme: dark。表示用户偏好深色主题。
- 自动深色模式。即使您未实现深色模式，也会以深色模式显示您的网页。此外，还会自动将
prefers-color-scheme设置为dark。
此下拉菜单是渲染标签页的模拟 CSS 媒体功能 prefers-color-scheme 和启用自动深色模式选项的快捷方式。
切换课程
如需在元素上启用或停用类，请执行以下操作：
添加样式规则
如需添加新的样式规则，请执行以下操作：
- 选择一个元素。
- 点击新建样式规则图标
。开发者工具会在 element.style 规则下方插入一条新规则。
在屏幕截图中，DevTools 在点击新建样式规则后添加了 h1.devsite-page-title 样式规则。
选择要向哪个样式表添加规则
添加新的样式规则时，点击并按住 New Style Rule
，以选择要将样式规则添加到哪个样式表中。
切换声明
如需开启或关闭单个声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，将鼠标悬停在定义声明的规则上。每个声明旁边都会显示复选框。
- 选中或取消选中声明旁边的复选框。清除声明后，开发者工具会将其划掉，以表明该声明不再有效。
在屏幕截图中，当前所选元素的 color 属性处于关闭状态。
在动画期间修改 ::view-transition 伪元素
请参阅动画中的相应部分。
如需了解详情，请参阅使用 View Transitions API 实现流畅简单的过渡效果。
使用网格编辑器对齐网格项及其内容
请参阅检查 CSS 网格中的相应部分。
使用颜色选择器更改颜色
使用角度时钟更改角度值
角度时钟提供了一个用于更改 CSS 属性值中 <angle> 的 GUI。
如需打开角度时钟，请执行以下操作：
- 选择一个带有角度声明的元素。
在样式标签页中，找到要更改的
transform或background声明。 点击角度值旁边的角度预览框。
-5deg和0.25turn左侧的小时钟是角度预览。点击预览即可打开角度时钟。
点击角度时钟圆圈可更改角度值，滚动鼠标可将角度值增加 / 减少 1。
还有更多键盘快捷键可用于更改角度值。如需了解详情，请参阅“样式”窗格键盘快捷键。
使用阴影编辑器更改框和文字阴影
影子编辑器提供了一个用于更改 text-shadow 和 box-shadow CSS 声明的 GUI。
如需使用阴影编辑器更改阴影，请执行以下操作：
在样式标签页中，找到
text-shadow或box-shadow声明旁边的阴影
图标。
点击阴影图标以打开阴影编辑器。
更改阴影属性：
- 类型（仅适用于
box-shadow）。选择 Outset 或 Inset。 - X 和 Y 偏移量。拖动蓝点或指定值。
- 模糊处理。拖动滑块或指定一个值。
- 点差（仅适用于
box-shadow）。拖动滑块或指定一个值。
- 类型（仅适用于
观察应用于元素的更改。
使用缓动编辑器修改动画和过渡效果的时间安排
缓动编辑器提供了一个用于更改 transition-timing-function 和 animation-timing-function 值的 GUI。
如需打开缓动编辑器，请执行以下操作：
- 选择具有定时函数声明的元素，例如本页上的
<body>元素。 - 在样式标签页中，找到
transition-timing-function、animation-timing-function声明或transition简写属性旁边的紫色
图标。
- 点击相应图标以打开缓动效果编辑器：
使用预设调整时间
如需通过点击调整时间，请使用缓动编辑器中的预设：
- 在加/减速选项编辑器中，如需设置关键字值，请点击其中一个选择器按钮：
- 线性
- 先加速后减速
- 由慢渐快
- ease-out
- 线性
在预设切换器中，点击
或 
按钮，选择以下预设之一：- 线性预设：
elastic、bounce或emphasized。 - 三次贝塞尔曲线预设：
- 线性预设：
| 时间关键字 | 预设 | 三次贝塞尔曲线 |
|---|---|---|
| 淡入淡出 | In Out、Sine | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| 二次方缓入缓出 | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| 缓入缓出，立方 | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| 快速退出，缓慢进入 | cubic-bezier(0.4, 0, 0.2, 1) |
|
| In Out, Back | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| 淡入 | In、Sine | cubic-bezier(0.47, 0, 0.75, 0.72) |
| 二次方缓入 | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| In、Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| 入、背 | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| 快速淡出，线性淡入 | cubic-bezier(0.4, 0, 1, 1) |
|
| 淡出 | Sine，出局 | cubic-bezier(0.39, 0.58, 0.57, 1) |
| 二次方缓出 | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| Out, Cubic | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| 线性淡出，缓慢淡入 | cubic-bezier(0, 0, 0.2, 1) |
|
| 出，返回 | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
配置自定义计时
如需为定时函数设置自定义值，请使用线条上的控制点：
对于线性函数，点击线条上的任意位置即可添加控制点，然后拖动该点。双击即可移除该点。
对于三次贝塞尔函数，请拖动其中一个控制点。
任何更改都会触发编辑器顶部预览中的球动画。
（实验性）复制 CSS 更改
启用此实验后，“样式”标签页会以绿色突出显示 CSS 更改。
如需复制单个 CSS 声明更改，请将鼠标悬停在突出显示的声明上，然后点击 
Copy 按钮。
如需一次性复制所有声明中的所有 CSS 更改，请右键点击任意声明，然后选择复制所有 CSS 更改。
此外，您还可以通过更改标签页跟踪所做的更改。