CSS 功能参考

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
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 说明的提示，请将鼠标悬停在样式标签页中的属性名称上。

包含 CSS 属性相关文档的提示。

点击了解详情可前往有关此属性的 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 条 @ 规则

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

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

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

查看 @supports 条 @ 规则

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

查看 @supports at-rules。

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

查看 @scope at-rule

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

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

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

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

@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 部分。

@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。

position-try-options 属性、@position-try 部分以及具有 popover 目标属性的元素。

要修改值，请双击。

查看元素的框模型

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

盒模型示意图。

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

搜索和过滤元素的 CSS

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

过滤“样式”标签页。

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

在“Computed”标签页中过滤继承的属性。

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

对过滤后的房源进行分组。

模拟已聚焦的网页

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

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

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

启用“模拟聚焦的网页”选项前后。

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

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

切换伪类

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

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

切换元素的悬停伪状态。

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

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

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

“textarea”元素的“强制设置特定元素状态”部分。

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

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

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

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

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

  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（和 JavaScript）的使用量概览。

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

  5. 点击某个 CSS 文件，即可在上述预览中逐行查看该文件使用的 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 属性。“复制 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 声明

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

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

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

添加内嵌声明

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

  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 即可。

更改长度值

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

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

  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. 在预设切换器中，点击 左。 或 Right. 按钮，选择以下预设之一：

时机关键字 预设 立方贝塞尔曲线
淡入淡出 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 更改

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

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

复制 CSS 声明更改。

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

复制所有 CSS 更改。

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