CSS 功能参考

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

查看这些关于 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 说明的提示，请将鼠标悬停在样式标签页中的属性名称上。

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

点击了解详情可转到有关此资源的 MDN CSS 参考文档。

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

要重新开启，请查看 设置。 设置 >偏好设置 >元素 >复选框。 显示 CSS 文档提示。

查看选择器特异性

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

包含匹配选择器特异性权重的提示。

查看自定义属性的值

将鼠标悬停在 --custom-property 上，即可以提示查看其值。

提示中自定义属性的值。

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

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

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

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

样式标签会显示应用于元素的所有规则，包括 已被覆盖。如果对被替换的声明不感兴趣，请使用 Computed 以便仅查看实际应用于元素的 CSS。

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

“计算”标签页。

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

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

按字母顺序查看 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 @ 规则（如果已应用于某个元素）。例如，检查以下元素：

查看 @supports at-rules。

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

查看 @scope 条 @ 规则

样式标签页会显示 CSS @scope at-rules（如果已应用于某个元素）。

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

在下面的预览视图中查看 @scope 规则：

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

@scope 规则。

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

要修改 @scope 规则，请双击相应规则。

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

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

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

  1. 在预览中检查第二行文字。
  2. 在样式中，找到 @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 部分：

<ph type="x-smartling-placeholder">。
通过 popover 使用锚点的演示
  1. 在预览中，打开子菜单，即依次点击您的账号和 STOREFRONT。
  2. 在预览中使用 id="submenu" 检查元素。
  3. 在样式中，找到 position-try-options 属性，然后点击其 --bottom 值。Styles（样式）标签页会将您转到相应的 @position-try 部分。
  4. 点击 position-anchor 值链接或相同的 anchor() 参数。Elements 面板会选择具有相应 popovertarget 属性的元素，并且 Styles 标签页会显示元素的 CSS。

position-try-options 属性、@position-try 部分以及具有弹出式窗口目标属性的元素。

要修改值，请双击。

查看元素的框模型

要查看元素的框模型，请转到样式标签页，然后点击操作栏中的 显示边栏。 显示边栏按钮。

方框模型示意图

要更改某个值，请双击该值。

搜索和过滤元素的 CSS

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

过滤“样式”标签页。

如果还要在 Computed 标签页中搜索继承的属性，请选中 Show All 复选框。

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

如需浏览 Computed 标签页，请选中 Group（分组），将过滤后的属性按可收起的类别进行分组。

将过滤后的属性分组。

模拟已聚焦的网页

如果将焦点从页面切换到开发者工具，某些叠加层元素会在由焦点触发时自动隐藏。例如，下拉列表、菜单或日期选择器。借助check_box 模拟聚焦的网页选项，您可以调试此类元素，使其成为焦点。

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

  1. 将焦点置于输入元素。该元素下方出现了另一个元素。
  2. 打开开发者工具。现在，开发者工具窗口获得焦点，而不是页面，因此该元素再次消失。
  3. 在元素 >样式，点击 :hov，勾选 check_box 模拟聚焦的网页，并确保输入的元素处于选中状态。现在，您可以检查其下的元素。

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

您也可以在“渲染”面板中找到同一选项。

切换伪类

如需切换伪类（例如 :active、:focus、:focus-within、:target、:hover、:visited 或 focus-visible），请使用以下代码：

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

切换元素的悬停伪状态。

在视口中，您可以看到开发者工具对元素应用 background-color 声明，即使元素实际上并未悬停在视口上。

有关互动式教程，请参阅向类添加伪状态。

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

借助伪元素，您可以为元素的特定部分设置样式。突出显示伪元素是带有“选中”标记的文档部分，并且其样式为“突出显示”来向用户指明此状态例如，::selection、::spelling-error、::grammar-error 和 ::highlight 都属于这类伪元素。

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

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

  1. 检查以下文本。

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

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

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

查看“样式”标签的“继承”部分。

查看级联层

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

如需查看级联层，请检查下一个元素并打开 Elements >样式。

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

级联层。

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

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

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

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

通过“覆盖率”标签页查看已使用和未使用的 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 >样式标签页中，右键点击 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: '值', propertyInCamelCase: '值', ...

    • 复制所有 CSS 更改。复制您在样式标签页中所做的全部声明。

    • 查看计算值。转到计算型标签页。

更改 CSS

本部分列出了在元素 > 中更改 CSS 的所有方法样式。

此外，您可以：

向元素添加 CSS 声明

由于声明的顺序会影响元素的样式，因此您可以在 方法：

您应使用哪种工作流程？在大多数情况下，您可能需要使用 声明工作流程内联声明比外部声明具有更高的特异性，因此内联声明 工作流程可以确保更改如您所愿在元素中生效。请参阅选择器 类型。

如果您要调试某个元素的样式，并且需要专门测试 声明在其他位置定义，请使用其他工作流。

添加内嵌声明

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

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

  4. 输入该属性的有效值，然后按 Enter 键。在 DOM 树中，您可以执行以下操作： 该元素将看到 style 属性已添加到该元素中。

    添加内嵌声明。

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

向样式规则添加声明

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

  1. 选择一个元素。
  2. 在样式标签页中，点击要添加的样式规则的括号之间 声明。光标会聚焦，让您可以输入文字。
  3. 输入属性名称，然后按 Enter 键。
  4. 输入该属性的有效值，然后按 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 每个实例替换为 向下。

更改长度值

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

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

  1. 将鼠标悬停在该单元名称上，您会看到它带有下划线。

  2. 点击单位名称，从下拉列表中选择一个单位。

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

  1. 将鼠标悬停在单位值上，您会注意到指针变为水平双头箭头。

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

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

向元素添加类

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

  1. 在 DOM 树中选择元素。
  2. 点击 .cls。
  3. 在 Add New Class 框中输入课程名称。
  4. 按 Enter 键。

“元素类”部分。

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

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

  1. 在元素 >Styles（样式）标签页中，点击 切换常见的渲染模拟。Toggle 通用渲染模拟。 切换常见的渲染模拟。

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

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

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

切换课程

要针对某个元素启用或停用某个类，请执行以下操作：

  1. 在 DOM 树中选择元素。
  2. 打开 Element Classes 部分。请参阅向元素添加类。在新增 Class 框中列出了要应用于此元素的所有类。
  3. 切换要启用或停用的类旁边的复选框。

添加样式规则

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

  1. 选择一个元素。
  2. 点击新建样式规则。 新建样式规则。。开发者工具会在 新规则（位于 element.style 规则下方）。

正在添加新的样式规则。

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

选择要添加规则的样式表

添加新样式规则时，点击并按住新建样式规则 新建样式规则。，用于选择样式表 要向其中添加样式规则

选择样式表。

切换声明

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

  1. 选择一个元素。
  2. 在样式标签页中，将鼠标悬停在定义声明的规则上。接下来会显示复选框 。
  3. 选中或清除该声明旁边的复选框。在您清除声明后，开发者工具会 就会将其划掉，表明该活动已失效。

切换声明。

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

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

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

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

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

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

使用颜色选择器更改颜色

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

使用“角时钟”更改角度值

角度时钟提供了一个 GUI，用于更改 CSS 属性值中的 <angle>。

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

  1. 选择一个已声明角度的元素。

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

    角度预览。

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

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

    角时钟。

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

  5. 还有更多可用于更改角度值的键盘快捷键。如需了解详情，请参阅“样式”窗格 键盘快捷键。

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

Shadow Editor 提供了一个用于更改 text-shadow 和 box-shadow CSS 声明的 GUI。

如需使用 Shadow Editor 更改阴影，请执行以下操作：

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

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

    阴影图标。

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

    阴影编辑器。

  4. 更改阴影属性：

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

  5. 观察应用于 element 的更改。

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

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

如需打开加/减速编辑器，请执行以下操作：

  1. 选择一个具有计时函数声明的元素，例如本页中的 <body> 元素。
  2. 在样式标签页中，找到 transition-timing-function、animation-timing-function 声明或 transition 简写属性旁边的紫色 方便。 图标。 “加/减速编辑器”图标。
  3. 点击该图标即可打开加/减速编辑器： 缓动编辑器。

使用预设调整时间

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

  1. 在缓动编辑器中，要设置关键字值，请点击选择器按钮之一： <ph type="x-smartling-placeholder">
      </ph>
    • 线性 线性按钮。
    • 缓入缓出 缓入缓出按钮。
    • 缓入 缓入按钮。
    • 缓出 缓出按钮。

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

    • 线性预设：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 更改，请右键点击任意声明，然后选择复制所有 CSS 更改。

复制所有 CSS 更改。

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