CSS 功能参考

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

请参阅与查看和更改 CSS 相关的 Chrome 开发者工具功能综合参考文档，探索新的工作流。

请参阅查看和更改 CSS 以了解基础知识。

选择元素

在开发者工具的 Elements 面板中，您可以一次查看或更改一个元素的 CSS。

在屏幕截图中，DOM 树中以蓝色突出显示的 h1 元素是所选元素。在右侧的样式标签页中，会显示该元素的样式。在左侧，该元素在视口中突出显示，但这只是因为鼠标在 DOM 树中悬停在该元素上。

如需查看教程，请参阅查看元素的 CSS。

您可以通过多种方式选择元素：

• 在视口中，右键点击相应元素，然后选择检查。
• 在 DevTools 中，点击选择元素图标 ，或按 Command+Shift+C (Mac) 或 Control+Shift+C (Windows、Linux)，然后点击视口中的元素。
• 在开发者工具中，点击 DOM 树中的元素。
• 在开发者工具中，在控制台中运行 document.querySelector('p') 等查询，右键点击结果，然后选择在“元素”面板中显示。

查看 CSS

依次选择 Elements（元素）> Styles（样式）和 Computed（计算出的样式属性）标签页，即可查看 CSS 规则并诊断 CSS 问题。

使用链接导航

样式标签页会显示各种位置指向其他各种位置的链接，包括但不限于：

• 在 CSS 规则旁边，找到样式表和 CSS 来源。此类链接会打开来源面板。如果样式表已缩减，请参阅使缩减后的文件可读。
• 在继承自...部分中，将其更改为父元素。
• 在 var() 调用中，指向自定义属性声明。
• 在 animation 缩写属性中，将其设置为 @keyframes。
• 文档提示中的了解详情链接。
• 以及其他凭证。

下面突出显示了其中一些功能：

链接的样式可能会有所不同。如果您不确定某个内容是否为链接，请尝试点击它进行确认。

查看包含 CSS 文档、专属性和自定义属性值的提示

当您将鼠标悬停在特定元素上时，元素 > 样式会显示包含实用信息的提示。

查看 CSS 文档

如需查看包含简短 CSS 说明的提示，请将鼠标悬停在样式标签页中的属性名称上。

注意：开发者工具会从 VS Code 自定义数据中提取提示说明。

点击了解详情可前往有关此属性的 MDN CSS 参考文档。

如需关闭提示，请勾选 不显示。

如需重新启用这些功能，请依次选择 设置 > 偏好设置 > 元素 > 显示 CSS 文档提示。

查看选择器特异性

将鼠标悬停在选择器上，即可看到包含其特异性权重的提示。

查看自定义属性的值

将鼠标悬停在 --custom-property 上，其值会显示在提示中。

查看无效、被替换、无效和其他 CSS

样式标签页可识别多种 CSS 问题，并以不同的方式突出显示这些问题。

请参阅了解“样式”标签页中的 CSS。

仅查看实际应用于元素的 CSS

样式标签页会显示应用于元素的所有规则，包括已被替换的声明。如果您不感兴趣了解被替换的声明，请使用计算标签页，仅查看实际应用于元素的 CSS。

1. 选择一个元素。
2. 转到元素面板中的计算出的样式值标签页。

选中 Show All 复选框以查看所有属性。

请参阅了解“计算出的样式属性”标签页中的 CSS。

按字母顺序查看 CSS 属性

使用计算标签页。请参阅仅查看实际应用于元素的 CSS。

查看继承的 CSS 属性

选中计算的标签页中的全部显示复选框。请参阅仅查看实际应用于元素的 CSS。

或者，滚动 Styles（样式）标签页，并找到名为 Inherited from <element_name> 的部分。

查看 CSS at-rules

@规则是可用于控制 CSS 行为的 CSS 语句。元素 > 样式在专用部分中显示以下 @ 规则：

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

查看 @property 条 @ 规则

借助 @property CSS at 规则，您可以明确定义 CSS 自定义属性并将其注册在样式表中，而无需运行任何 JavaScript。

将鼠标悬停在 Styles（样式）标签页中的此类属性名称上，即可在 Styles（样式）标签页底部的可收起 @property 部分中，显示一条提示，其中包含该属性的值、描述符以及指向其注册的链接。

如需修改 @property 规则，请双击其名称或值。

查看 @supports 条 @ 规则

如果 @supports CSS at-rule 已应用于某个元素，样式标签页会显示该 at-rule。例如，检查以下元素：

如果您的浏览器支持 lab() 函数，该元素会显示为绿色，否则会显示为紫色。

注意：在撰写本文时，只有 Safari 支持 CIELAB 色彩空间。

查看 @scope at-rule

如果有 CSS @scope 语法应用于元素，样式标签页会显示这些语法。

新的 @scope at 规则属于 CSS 层叠和继承第 6 级规范的一部分。这些规则允许您限定 CSS 样式的范围，也就是说，将样式显式应用于特定元素。

注意：@scope at-rule 功能处于实验阶段。如需对其进行测试，请在 chrome://flags/#enable-experimental-web-platform-features 中启用实验性 Web 平台功能标志。否则，下次预览将无法正常运行。

在以下预览中查看 @scope 规则：

1. 在预览中检查卡片上的文本。
2. 在 Styles（样式）标签页中，找到 @scope 规则。

在此示例中，@scope 规则会替换具有 card 类的元素内所有 <p> 元素的全局 CSS background-color 声明。

如需修改 @scope 规则，请对其双击。

查看 @font-palette-values 条 @ 规则

借助 @font-palette-values CSS at 规则，您可以自定义 font-palette 属性的默认值。元素 > 样式可在专门的部分中显示此 @ 规则。

在下一个预览中查看 @font-palette-values 部分：

这个 Pen

1. 在预览中检查第二行文本。
2. 在样式中，找到 @font-palette-values 部分。

在此示例中，--New 字体调色板值会替换彩色字体的默认值。

要修改您的自定义值，请双击它们。

查看 @position-try at-rule

通过 @position-try CSS 规则和 position-try-options 属性，您可以为元素定义备用锚点位置。如需了解详情，请参阅CSS 锚点定位 API 简介。

元素 > 样式解析并关联以下内容：

• position-try-options 属性值添加到专用的 @position-try --name 部分。
• 为具有 popovertarget 属性的相应元素添加 position-anchor 属性值和 anchor() 参数。

在下一个预览中检查 position-try-options 值和 @position-try 部分：

使用 popover 的锚点演示

1. 在预览中，打开子菜单，即依次点击您的账号和商店。
2. 在预览中使用 id="submenu" 检查元素。
3. 在样式中，找到 position-try-options 属性，然后点击其 --bottom 值。样式标签页会将您带到相应的 @position-try 部分。
4. 点击 position-anchor 值链接或相同的 anchor() 参数。Elements 面板会选择具有相应 popovertarget 属性的元素，而 Styles 标签页会显示该元素的 CSS。

要修改值，请双击。

查看元素的框模型

如需查看元素的盒模型，请前往样式标签页，然后点击操作栏中的 Show sidebar（显示边栏）按钮。

如需更改某个值，请双击该值。

搜索和过滤元素的 CSS

使用样式和计算标签页上的过滤条件框搜索特定 CSS 属性或值。

如需在计算出的样式属性标签页中搜索继承的属性，请选中全部显示复选框。

如需浏览计算标签页，请选中分组，将过滤后的房源分组到可收起的类别中。

模拟已聚焦的网页

如果您将焦点从网页切换到 DevTools，某些叠加层元素会自动隐藏，前提是这些元素是通过焦点触发的。例如，下拉列表、菜单或日期选择器。借助check_box 模拟已聚焦的网页选项，您可以像调试聚焦的元素一样调试此类元素。

注意 ：启用此选项后，document.visibilityState 会设为 visible，并且不会触发 visibilitychange 事件。如需了解详情，请参阅 Page Visibility API。

请尝试在此演示页面上模拟已聚焦的网页：

1. 将焦点置于输入元素。下方会显示另一个元素。
2. 打开开发者工具。现在，DevTools 窗口获得焦点，而不是页面，因此该元素再次消失。
3. 在 Elements（元素）> Styles（样式）中，点击 :hov，选中 check_box Emulate a focused page（模拟聚焦页面），并确保选择了输入元素。现在，您可以检查其下的元素。

您也可以在渲染面板中找到相同的选项。

如需了解更多冻结元素的方法，请参阅冻结屏幕并检查正在消失的元素。

切换伪类

如需切换伪类，请执行以下操作：

1. 选择一个元素。
2. 在元素面板上，前往样式标签页。
3. 点击 :hov。
4. 选中您要开启的伪类。

在此示例中，您可以看到 DevTools 会将 background-color 声明应用于该元素，即使该元素实际上并未被悬停。

样式标签页会显示所有元素的以下伪类：

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

此外，某些元素可能具有自己的伪类。选择此类元素后，样式标签页会显示强制采用特定元素状态部分，您可以展开该部分并开启特定于该元素的伪类。

如需查看互动式教程，请参阅向类添加伪状态。

查看继承的突出显示伪元素

借助伪元素，您可以为元素的特定部分设置样式。突出显示伪元素是处于“已选中”状态的文档部分，其样式为“突出显示”，以向用户指明此状态。例如，此类伪元素包括 ::selection、::spelling-error、::grammar-error 和 ::highlight。

如规范中所述，当多个样式发生冲突时，级联会确定胜出的样式。

注意：如需启用此功能，请使用 --enable-blink-features=HighlightInheritance 标志运行 Chrome。

为了更好地了解规则的继承和优先级，您可以查看继承的突出显示伪元素：

1. 检查下方的文本。

   我继承了父级的突出显示伪元素的样式。选择我！

2. 选择上方文本的一部分。

3. 在样式标签页中，向下滚动，找到 Inherited from ::selection pseudo of... 部分。

查看级联层

级联层可让您更明确地控制 CSS 文件，以防止样式特异性冲突。这对于大型代码库、设计系统以及在应用中管理第三方样式非常有用。

如需查看级联层，请检查下一个元素，然后依次打开 Elements > Styles。

在 Styles（样式）标签页中，查看 3 个级联层及其样式：page、component 和 base。

如需查看图层顺序，请点击图层名称或 Toggle CSS 图层视图按钮。

page 层具有最高的特异性，因此元素的背景为绿色。

在打印模式下查看页面

要在打印模式下查看网页，请执行以下操作：

1. 打开命令菜单。
2. 开始输入 Rendering，然后选择 Show Rendering。
3. 在 Emulate CSS Media（模拟 CSS 媒体）下拉菜单中，选择 print（打印）。

使用“覆盖率”标签页查看已使用和未使用的 CSS

“覆盖率”标签页会显示网页实际使用的 CSS。

1. 在开发者工具获得焦点时，按 Command+Shift+P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS）以打开命令菜单。

2. 开始输入 coverage。

   

3. 选择显示覆盖率。此时会显示“覆盖率”标签页。

   

4. 点击 重新加载。 网页会重新加载，覆盖率标签页会简要显示浏览器加载的每个文件中使用的 CSS（和 JavaScript）数量。

   

   绿色表示已使用的 CSS。红色表示未使用的 CSS。

5. 点击某个 CSS 文件，即可在上述预览中逐行查看该文件使用的 CSS。

   

   在屏幕截图中，devsite-google-blue.css 的第 55 到 57 行和第 65 到 67 行未使用，而使用了第 59 到 63 行。

强制进入打印预览模式

请参阅将开发者工具强制转换为打印预览模式。

复制 CSS

从样式标签页的一个下拉菜单中，您可以复制单独的 CSS 规则、声明、属性、值

此外，您还可以使用 JavaScript 语法复制 CSS 属性。如果您使用的是 CSS-in-JS 库，此选项非常实用。

如需复制 CSS，请执行以下操作：

1. 选择一个元素。
2. 在 Elements（元素）> Styles（样式）标签页中，右键点击某个 CSS 属性。

3. 从下拉菜单中选择以下任一选项：

   • 复制声明。以 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

本部分列出了您可以在 Elements（元素）> Styles（样式）中更改 CSS 的所有方式。

此外，您可以：

• 在网页加载过程中替换 CSS。
• 将修改后的 CSS 保存到工作区中的本地来源。

向元素添加 CSS 声明

由于声明的顺序会影响元素的样式，因此您可以通过不同的方式添加声明：

• 添加内嵌声明。相当于向元素的 HTML 添加 style 属性。
• 向样式规则添加声明。

您应使用哪种工作流程？对于大多数场景，您可能希望使用内嵌声明工作流。内嵌声明的具体性高于外部声明，因此内嵌工作流可确保更改在元素中按预期生效。如需详细了解明确性，请参阅选择器类型。

如果您要调试元素的样式，并且需要专门测试在不同位置定义声明时会发生什么情况，请使用另一种工作流。

添加内嵌声明

如需添加内嵌声明，请执行以下操作：

1. 选择一个元素。
2. 在样式标签页中，点击 element.style 部分的括号之间。光标会聚焦，让您可以输入文本。
3. 输入媒体资源名称，然后按 Enter 键。

4. 为该属性输入有效值，然后按 Enter 键。在 DOM Tree 中，您可以看到 style 属性已添加到该元素。

   

   在屏幕截图中，margin-top 和 background-color 属性已应用于所选元素。在 DOM Tree 中，您可以看到声明反映在元素的 style 属性中。

向样式规则添加声明

如需向现有样式规则添加声明，请执行以下操作：

1. 选择一个元素。
2. 在 Styles（样式）标签页中，点击要添加声明的样式规则的括号之间。光标会聚焦，让您可以输入文字。
3. 输入媒体资源名称，然后按 Enter 键。
4. 为该属性输入有效值，然后按 Enter 键。

在屏幕截图中，样式规则会获取新的 border-bottom-style:groove 声明。

更改声明名称或值

双击声明的名称或值可对其进行更改。如需了解用于快速按 0.1、1、10 或 100 单位递增或递减值的快捷键，请参阅使用键盘快捷键更改可枚举值。

使用键盘快捷键更改可枚举值

在编辑声明的可枚举值（例如 font-size）时，您可以使用以下键盘快捷键按固定值递增值：

• 按 Option+Up（Mac）或 Alt+Up（Windows、Linux）以增量 0.1。
• 向上键可将值增大或减小 1（如果当前值介于 -1 和 1 之间，则增大或减小 0.1）。
• Shift + Up 以按 10 递增。
• Shift + Command + Up (Mac) 或 Ctrl + Shift + Page Up（Windows、Linux）可将值以 100 为增量递增。

减少也可以。只需将前面提到的 Up 每个实例替换为 Down 即可。

更改长度值

已废弃： 此功能在 Chrome 123 中已废弃。若要暂时重新启用此选项，请依次清除设置 设置 > 实验 > check_box 在“样式”标签页中弃用 CSS <length> 制作工具。欢迎随时在 crbug/1522657 中留下反馈。

您可以使用指针更改任何具有长度的属性，例如宽度、高度、内边距、外边距或边框。

如需更改长度单位，请执行以下操作：

1. 将鼠标悬停在相应单元名称上，您会发现该名称会带有下划线。

2. 点击相应单位名称，从下拉菜单中选择一个单位。

如需更改长度值，请执行以下操作：

1. 将光标悬停在单位值上，您会发现光标会变为水平双向箭头。

2. 水平拖动可增大或减小值。

要将值调整 10 倍，请在拖动时按住 Shift。

向元素添加类

如需向元素添加类，请执行以下操作：

1. 在 DOM Tree 中选择元素。
2. 点击 .cls。
3. 在添加新课程框中输入课程名称。
4. 按 Enter 键。

模拟浅色和深色主题偏好设置，并启用自动深色模式

如需切换自动深色模式或模拟用户的浅色或深色主题偏好设置，请执行以下操作：

1. 在元素 > 样式标签页上，点击 切换常见的渲染模拟。

2. 从下拉列表中选择以下任一选项：

   • prefers-color-scheme: light。指示用户更喜欢浅色主题。
   • prefers-color-scheme: dark。表示用户更喜欢使用深色主题。
   • 自动深色模式。以深色模式显示您的网页，即使您未实现深色模式也是如此。此外，还会自动将 prefers-color-scheme 设为 dark。

此下拉菜单是渲染标签页的模拟 CSS 媒体功能 prefers-color-scheme 和启用自动深色模式选项的快捷方式。

切换类

如需为元素启用或停用类，请执行以下操作：

1. 在 DOM Tree 中选择元素。
2. 打开元素类部分。请参阅为元素添加类。Add New Class（添加新类）框下方列出了要应用于此元素的所有类。
3. 切换要启用或停用的类旁边的复选框。

添加样式规则

要添加新的样式规则，请执行以下操作：

1. 选择一个元素。
2. 点击新建样式规则 。DevTools 会在 element.style 规则下方插入新规则。

在屏幕截图上，开发者工具会在点击 New Style Rule 后添加 h1.devsite-page-title 样式规则。

选择要向哪个样式表添加规则

添加新样式规则时，点击并按住 New Style Rule 图标 ，选择要将样式规则添加到哪个样式表。

切换声明

如需开启或关闭单个声明，请执行以下操作：

1. 选择一个元素。
2. 在样式标签页中，将鼠标悬停在定义声明的规则上。每个声明旁边都会显示复选框。
3. 选中或取消选中声明旁边的复选框。当您清除声明时，DevTools 会将其划掉，以指示其已失效。

在屏幕截图中，当前所选元素的 color 属性处于关闭状态。

在动画期间修改 ::view-transition 伪元素

请参阅动画中的相应部分。

如需了解详情，请参阅使用 View Transitions API 实现平滑简单的过渡。

使用网格编辑器对齐网格项及其内容

请参阅“检查 CSS 网格”中的相应部分。

使用颜色选择器更改颜色

请参阅使用颜色选择器检查和调试高清和非高清颜色。

使用角度时钟更改角度值

Angle Clock 提供了一个 GUI，用于更改 CSS 属性值中的 <angle>。

如需打开角度时钟，请执行以下操作：

1. 选择一个元素，其中包含角度声明。

2. 在样式标签页中，找到要更改的 transform 或 background 声明。点击角度值旁边的角度预览框。

   

   -5deg 和 0.25turn 左侧的小时钟是角度预览。

3. 点击预览以打开 Angle Clock。

   

4. 点击角度时钟圆圈来更改角度值，或滚动鼠标以以 1 增大 / 减小角度值。

5. 您可以使用更多键盘快捷键来更改角度值。如需了解详情，请参阅 “样式”窗格键盘快捷键。

使用阴影编辑器更改框和文本阴影

阴影编辑器提供了一个 GUI，用于更改 text-shadow 和 box-shadow CSS 声明。

如需使用阴影编辑器更改阴影，请执行以下操作：

1. 选择包含阴影声明的元素。例如，选择下一个元素。

2. 在 Styles（样式）标签页中，找到 text-shadow 或 box-shadow 声明旁边有一个阴影 图标。

   

3. 点击阴影图标以打开阴影编辑器。

   

4. 更改阴影属性：

   • 类型（仅适用于 box-shadow）。选择轮廓或边衬区。
   • X 和 Y 偏移量。拖动蓝点或指定值。
   • 模糊处理。拖动滑块或指定值。
   • 分散（仅适用于 box-shadow）。拖动滑块或指定一个值。

5. 观察应用于元素的更改。

使用加/减速编辑器修改动画和过渡时间

加/减速编辑器提供了一个 GUI，用于更改 transition-timing-function 和 animation-timing-function 的值。

如需打开缓动编辑器，请执行以下操作：

1. 选择包含时间函数声明的元素，例如本页中的 <body> 元素。
2. 在样式标签页中，找到 transition-timing-function、animation-timing-function 声明或 transition 缩写属性旁边的紫色 图标。
3. 点击该图标以打开缓动编辑器：

使用预设调整时间

如需通过点击调整时间，请使用加/减速编辑器中的预设：

1. 在缓动编辑器中，点击某个选择器按钮以设置关键字值：
   • 线性
   • 先加速后减速
   • 缓入
   • 缓出

2. 在预设切换器中，点击 或 按钮，选择以下预设之一：

   • 线性预设：elastic、bounce 或 emphasized。
   • 三次贝塞尔曲线预设：

时机关键字	预设	立方贝塞尔曲线
淡入淡出	In Out、Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	在 Out 中，选择“Quadratic”（二次）	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	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)
	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 更改

注意：如需启用此实验性功能，请勾选 Settings > 实验下的 Sync CSS changes in the Styles tab（在“Styles”标签页中同步 CSS 更改），然后重新加载开发者工具。

启用此实验后，样式标签页会以绿色突出显示您的 CSS 更改。

如需复制单个 CSS 声明更改，请将鼠标悬停在突出显示的声明上，然后点击 Copy 按钮。

要一次性复制所有声明中的所有 CSS 更改，请右键点击任意声明，然后选择复制所有 CSS 更改。

此外，您还可以使用更改标签页来跟踪更改。