查看这些关于 Chrome 开发者工具功能的综合参考，其中介绍了与 查看并更改 CSS
请参阅查看和更改 CSS 以了解基础知识。
选择元素
在开发者工具的 Elements 面板中，您可以一次查看或更改一个元素的 CSS。
在屏幕截图中，DOM 树中以蓝色突出显示的 h1 元素即为所选元素。
在右侧，元素的样式显示在样式标签页中。在左侧，元素为
但这只是因为在 DOM 中将鼠标悬停在该视图上时，
树。
有关教程，请参阅查看元素的 CSS。
您可以通过多种方式选择元素：
- 在视口中，右键点击相应元素，然后选择检查。
- 在开发者工具中，点击选择元素
或者按 Command + Shift + C (Mac) 或
Ctrl + 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
样式标签会显示应用于元素的所有规则，包括 已被覆盖。如果对被替换的声明不感兴趣，请使用 Computed 以便仅查看实际应用于元素的 CSS。
- 选择一个元素。
- 转到元素面板中的计算出的样式值标签页。
选中 Show All 复选框以查看所有属性。
按字母顺序查看 CSS 属性
使用计算出的值标签页。请参阅仅查看实际应用于元素的 CSS。
查看继承的 CSS 属性
选中计算的标签页中的全部显示复选框。请参阅仅查看实际 应用于某个元素。
或者，滚动 Styles（样式）标签页，并找到名为 Inherited from <element_name> 的部分。
查看 CSS at-rules
@规则是可用于控制 CSS 行为的 CSS 语句。元素 >样式在专用部分中显示以下 @ 规则：
查看 @property 条 @ 规则
借助 @property CSS at-rule，您可以明确定义 CSS 自定义属性，并在样式表中注册这些属性，而无需运行任何 JavaScript。
将鼠标悬停在 Styles（样式）标签页中的此类属性名称上，即可在 Styles（样式）标签页底部的可收起 @property 部分中，显示一条提示，其中包含该属性的值、描述符以及指向其注册的链接。
如需修改 @property 规则，请双击其名称或值。
查看 @supports 条 @ 规则
样式标签页会显示 @supports CSS @ 规则（如果已应用于某个元素）。例如，检查以下元素：
如果您的浏览器支持 lab() 函数，则该元素为绿色，否则为紫色。
查看 @scope 条 @ 规则
样式标签页会显示 CSS @scope at-rules（如果已应用于某个元素）。
新的 @scope at-rules 是 CSS 级联和继承级别 6 规范的一部分。这些规则允许您限定 CSS 样式的范围，也就是说，将样式显式应用于特定元素。
在下面的预览视图中查看 @scope 规则：
- 在预览中检查卡片上的文字。
- 在样式标签页中，找到
@scope规则。
在此示例中，@scope 规则会使用 card 类替换元素内所有 <p> 元素的全局 CSS background-color 声明。
要修改 @scope 规则，请双击相应规则。
查看 @font-palette-values 条 @ 规则
借助 @font-palette-values CSS at-rule，您可以自定义 font-palette 属性的默认值。元素 >样式在专门的部分中显示此 @ 规则。
在下一个预览中查看 @font-palette-values 部分：
- 在预览中检查第二行文字。
- 在样式中，找到
@font-palette-values部分。
在此示例中，--New 字体调色板值会替换彩色字体的默认值。
要修改您的自定义值，请双击它们。
查看 @position-try 条 @ 规则
通过 @position-try CSS 规则和 position-try-options 属性，您可以为元素定义备用锚点位置。如需了解详情，请参阅 CSS Anchor Locationing API 简介。
元素 >Styles 可解析并关联以下内容：
position-try-options属性值添加到专用的@position-try --name部分。- 为具有
popovertarget属性的相应元素添加position-anchor属性值和anchor()参数。
在下一个预览中检查 position-try-options 值和 @position-try 部分：
popover 使用锚点的演示- 在预览中，打开子菜单，即依次点击您的账号和 STOREFRONT。
- 在预览中使用
id="submenu"检查元素。 - 在样式中，找到
position-try-options属性，然后点击其--bottom值。Styles（样式）标签页会将您转到相应的@position-try部分。 - 点击
position-anchor值链接或相同的anchor()参数。Elements 面板会选择具有相应popovertarget属性的元素，并且 Styles 标签页会显示元素的 CSS。
要修改值，请双击。
查看元素的框模型
要查看元素的框模型，请转到样式标签页，然后点击操作栏中的 
显示边栏按钮。
要更改某个值，请双击该值。
搜索和过滤元素的 CSS
使用样式和已计算标签页上的过滤框来搜索特定的 CSS 属性或值。
如果还要在 Computed 标签页中搜索继承的属性，请选中 Show All 复选框。
如需浏览 Computed 标签页，请选中 Group（分组），将过滤后的属性按可收起的类别进行分组。
模拟已聚焦的网页
如果将焦点从页面切换到开发者工具，某些叠加层元素会在由焦点触发时自动隐藏。例如，下拉列表、菜单或日期选择器。借助check_box 模拟聚焦的网页选项，您可以调试此类元素，使其成为焦点。
尝试在此演示页面上模拟聚焦的页面：
- 将焦点置于输入元素。该元素下方出现了另一个元素。
- 打开开发者工具。现在，开发者工具窗口获得焦点，而不是页面，因此该元素再次消失。
- 在元素 >样式，点击 :hov，勾选 check_box 模拟聚焦的网页，并确保输入的元素处于选中状态。现在，您可以检查其下的元素。
您也可以在“渲染”面板中找到同一选项。
切换伪类
如需切换伪类（例如 :active、:focus、:focus-within、:target、:hover、:visited 或 focus-visible），请使用以下代码：
- 选择一个元素。
- 在元素面板上，前往样式标签页。
- 点击 :hov。
- 选中要开启的伪类。
在视口中，您可以看到开发者工具对元素应用 background-color 声明，即使元素实际上并未悬停在视口上。
有关互动式教程，请参阅向类添加伪状态。
查看继承的突出显示伪元素
借助伪元素，您可以为元素的特定部分设置样式。突出显示伪元素是带有“选中”标记的文档部分，并且其样式为“突出显示”来向用户指明此状态例如，::selection、::spelling-error、::grammar-error 和 ::highlight 都属于这类伪元素。
如规范中所述，当多个样式发生冲突时，级联决定胜出的样式。
为了更好地了解规则的继承和优先级，您可以查看继承的突出显示伪元素：
-
我继承了父项的突出显示伪元素的样式。选择我！
选择上方文本的一部分。
在 Styles（样式）标签页中，向下滚动以找到
Inherited from ::selection pseudo of...部分。
查看级联层
级联层可让您更明确地控制 CSS 文件，以防止样式特异性冲突。这对于大型代码库、设计系统以及管理应用中的第三方样式非常有用。
如需查看级联层，请检查下一个元素并打开 Elements >样式。
在 Styles（样式）标签页中，查看 3 个级联层及其样式：page、component 和 base。
如需查看图层顺序，请点击图层名称或 
Toggle CSS 图层视图按钮。
page 层具有最高的特异性，因此元素的背景为绿色。
在打印模式下查看网页
要在打印模式下查看网页，请执行以下操作：
- 打开命令菜单。
- 开始输入
Rendering，然后选择Show Rendering。 - 在模拟 CSS 媒体下拉菜单中，选择打印。
通过“覆盖率”标签页查看已使用和未使用的 CSS
“覆盖率”标签页会显示网页实际使用的 CSS。
- 按 Command + Shift + P (Mac) 或 Ctrl+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，请执行以下操作：
- 选择一个元素。
- 在 Elements >样式标签页中，右键点击 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: '值', propertyInCamelCase: '值', ...
复制所有 CSS 更改。复制您在样式标签页中所做的全部声明。
查看计算值。转到计算型标签页。
- 复制声明。复制采用 CSS 语法的属性及其值：
更改 CSS
本部分列出了在元素 > 中更改 CSS 的所有方法样式。
此外，您可以：
向元素添加 CSS 声明
由于声明的顺序会影响元素的样式，因此您可以在 方法：
您应使用哪种工作流程？在大多数情况下，您可能需要使用 声明工作流程内联声明比外部声明具有更高的特异性，因此内联声明 工作流程可以确保更改如您所愿在元素中生效。请参阅选择器 类型。
如果您要调试某个元素的样式，并且需要专门测试 声明在其他位置定义，请使用其他工作流。
添加内嵌声明
要添加内嵌声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，点击 element.style 部分的括号之间。光标 让您可以输入文字。
- 输入属性名称，然后按 Enter 键。
输入该属性的有效值，然后按 Enter 键。在 DOM 树中，您可以执行以下操作： 该元素将看到
style属性已添加到该元素中。
在屏幕截图中，
margin-top和background-color属性已应用于所选元素。在 DOM 树中，您可以看到在元素的style属性中反映的声明。
向样式规则添加声明
要向现有样式规则添加声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，点击要添加的样式规则的括号之间 声明。光标会聚焦，让您可以输入文字。
- 输入属性名称，然后按 Enter 键。
- 输入该属性的有效值，然后按 Enter 键。
在屏幕截图中，样式规则获得了新的 border-bottom-style:groove 声明。
更改声明名称或值
双击某项声明的名称或值即可对其进行更改。请参阅通过 键盘快捷键：使用快捷键以 0.1、1、1 10 或 100 个单位。
使用键盘快捷键更改可枚举值
在修改声明的可枚举值（例如 font-size）时，您可以使用以下键盘快捷键将值增加固定数量：
- 按 Option + 向上键 (Mac) 或 Alt + 向上键（Windows、Linux）即可 以 0.1 递增。
- 向上：可将值按 1 更改；如果当前值介于 -1 和 1 之间，则按 0.1 更改。
- Shift + Up 以按 10 递增。
- Shift + Command + Up (Mac) 或 Ctrl + Shift + Page Up （Windows、Linux）将值以 100 为增量递增。
减少也可以。只需将前面提到的 Up 每个实例替换为 向下。
更改长度值
您可以使用指针更改任何具有长度的属性，例如宽度、高度、内边距、外边距或边框。
如需更改长度单位，请执行以下操作：
- 将鼠标悬停在该单元名称上，您会看到它带有下划线。
点击单位名称，从下拉列表中选择一个单位。
如需更改长度值，请执行以下操作：
- 将鼠标悬停在单位值上，您会注意到指针变为水平双头箭头。
水平拖动可增大或减小值。
要将值调整 10 倍，请在拖动时按住 Shift。
向元素添加类
如需向元素添加类，请执行以下操作：
- 在 DOM 树中选择元素。
- 点击 .cls。
- 在 Add New Class 框中输入课程名称。
- 按 Enter 键。
模拟浅色和深色主题背景偏好设置，并启用自动深色模式
如需切换自动深色模式或模拟用户的偏好设置，请执行以下操作：
- 在元素 >Styles（样式）标签页中，点击
Toggle 通用渲染模拟。
从下拉列表中选择下列其中一项：
- prefers-color-scheme: light。表示用户更喜欢浅色主题。
- prefers-color-scheme: dark。表示用户更喜欢使用深色主题。
- 自动深色模式。以深色模式显示您的网页，即使您未实现该模式也是如此。此外，系统会自动将
prefers-color-scheme设置为dark。
此下拉菜单是渲染标签页的模拟 CSS 媒体功能 prefers-color-scheme 和启用自动深色模式选项的快捷方式。
切换课程
要针对某个元素启用或停用某个类，请执行以下操作：
添加样式规则
要添加新的样式规则，请执行以下操作：
- 选择一个元素。
- 点击新建样式规则。
。开发者工具会在
新规则（位于 element.style 规则下方）。
在屏幕截图上，开发者工具会在点击 New Style Rule 后添加 h1.devsite-page-title 样式规则。
选择要添加规则的样式表
添加新样式规则时，点击并按住新建样式规则
，用于选择样式表
要向其中添加样式规则
切换声明
如需开启或关闭单个声明，请执行以下操作：
- 选择一个元素。
- 在样式标签页中，将鼠标悬停在定义声明的规则上。接下来会显示复选框 。
- 选中或清除该声明旁边的复选框。在您清除声明后，开发者工具会 就会将其划掉，表明该活动已失效。
在屏幕截图中，当前所选元素的 color 属性处于关闭状态。
在动画期间修改 ::view-transition 伪元素
请参阅动画中的相应部分。
如需了解详情，请参阅使用 View Transitions API 实现平滑简单的过渡。
使用网格编辑器对齐网格项及其内容
使用颜色选择器更改颜色
使用“角时钟”更改角度值
角度时钟提供了一个 GUI，用于更改 CSS 属性值中的 <angle>。
如需打开角度时钟，请执行以下操作：
- 选择一个已声明角度的元素。
在样式标签页中，找到要更改的
transform或background声明。 点击角度值旁边的角度预览框。
-5deg和0.25turn左侧的小时钟是角度预览。点击预览以打开 Angle Clock。
点击角度时钟圆圈，或将鼠标滚动至 将角度值增大 / 减小 1。
还有更多可用于更改角度值的键盘快捷键。如需了解详情，请参阅“样式”窗格 键盘快捷键。
使用阴影编辑器更改框和文本阴影
Shadow Editor 提供了一个用于更改 text-shadow 和 box-shadow CSS 声明的 GUI。
如需使用 Shadow Editor 更改阴影，请执行以下操作：
选择一个已声明阴影的元素。例如，选择下一个元素。
在 Styles（样式）标签页中，找到
text-shadow或box-shadow声明旁边有一个阴影
图标。
点击阴影图标以打开阴影编辑器。
更改阴影属性：
- Type（仅适用于
box-shadow）。选择轮廓或边衬区。 - X 偏移和 Y 偏移。拖动蓝点或指定值。
- 模糊处理。拖动滑块或指定一个值。
- 分散（仅适用于
box-shadow）。拖动滑块或指定一个值。
- Type（仅适用于
观察应用于 element 的更改。
使用加/减速编辑器修改动画和过渡时间
加/减速编辑器提供了一个 GUI，用于更改 transition-timing-function 和 animation-timing-function 的值。
如需打开加/减速编辑器，请执行以下操作：
- 选择一个具有计时函数声明的元素，例如本页中的
<body>元素。 - 在样式标签页中，找到
transition-timing-function、animation-timing-function声明或transition简写属性旁边的紫色
图标。
- 点击该图标即可打开加/减速编辑器：
使用预设调整时间
如需通过点击调整时间，请使用加/减速编辑器中的预设：
- 在缓动编辑器中，要设置关键字值，请点击选择器按钮之一：
<ph type="x-smartling-placeholder">
- </ph>
- 线性
- 缓入缓出
- 缓入
- 缓出
- 线性
在预设切换器中，点击
或 
按钮，选择以下预设之一：- 线性预设：
elastic、bounce或emphasized。 - 立方贝塞尔预设：
- 线性预设：
| 时机关键字 | 预设 | 三次贝塞尔曲线 |
|---|---|---|
| 淡入淡出 | 输入/输出/正弦 | 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) |
|
| 进出，返回 | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| 淡入 | 入、正弦 | cubic-bezier(0.47, 0, 0.75, 0.72) |
| 输入、二次序 | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| 进、立方 | 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) |
|
| 淡出 | 出，正弦 | cubic-bezier(0.39, 0.58, 0.57, 1) |
| 出局，二次方 | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| 输出，立方体 | 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) |
配置自定义显示时间
要为计时函数设置自定义值，请使用线上的控制点：
对于线性函数，点击线条上的任意位置即可添加控制点并拖动。双击即可移除该点。
对于三次贝塞尔函数，拖动其中一个控制点。
任何更改都会在编辑器顶部的 Preview 中触发球动画。
（实验性）复制 CSS 更改
启用此实验后，样式标签页会以绿色突出显示您的 CSS 更改。
如需复制单项 CSS 声明更改，请将鼠标悬停在突出显示的声明上，然后点击 
Copy 按钮。
要一次性复制所有声明中的所有 CSS 更改，请右键点击任意声明，然后选择复制所有 CSS 更改。
此外，您还可以使用更改标签页来跟踪更改。