CSS 功能参考

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

在这份有关查看和更改 CSS 的 Chrome 开发者工具功能的综合参考文档中，探索新的工作流程。

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

选择元素

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

所选元素的示例。

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

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

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

  • 在视口中，右键点击该元素，然后选择检查。
  • 在开发者工具中，点击选择元素 选择元素，或按 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 文档提示。

查看选择器特异性

将鼠标悬停在样式标签页中的选择器上（包括嵌套 CSS 规则中的父级选择器、继承的嵌套规则和 @nested-declarations 规则），即可查看包含其特异性权重的提示，并在视口中突出显示匹配的元素。

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

查看自定义属性的值

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

提示中显示的自定义属性的值。

查看无效、被覆盖、无效和其他 CSS

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

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

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

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

  1. 选择元素。
  2. 前往元素面板中的已计算标签页。

“计算”标签页。

勾选全部显示复选框，即可查看所有属性。

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

按字母顺序查看 CSS 属性

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

查看继承的 CSS 属性

在 Computed 标签页中，选中 Show All 复选框。请参阅仅查看实际应用于元素的 CSS。

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

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

查看 CSS at 规则

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

查看 @property 条 at 规则

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

将鼠标悬停在样式标签页中此类属性的名称上，即可看到一个工具提示，其中包含该属性的值、描述符以及指向其在样式标签页底部可折叠的 @property 部分中的注册信息的链接。

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

查看 @supports 个 at 规则

样式标签页会显示 @supports CSS at 规则（如果这些规则应用于某个元素）。例如，检查以下元素：

查看 @supports at-rules。

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

查看 @scope 个 @ 规则

如果 CSS @scope at 规则应用于某个元素，样式标签页会显示这些规则。

新的 @scope at 规则是 CSS 级联和继承级别 6 规范的一部分。这些规则可让您限定 CSS 样式的范围，换句话说，就是将样式明确应用于特定元素。

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

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

@scope 规则。

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

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

查看 @font-palette-values 个 at 规则

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

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

  1. 检查预览中的第二行文字。
  2. 在样式中，找到 @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
  1. 在预览中，打开子菜单，即依次点击您的账号和店面。
  2. 在预览中检查具有 id="submenu" 的元素。
  3. 在样式中，找到 position-try-options 属性，然后点击其 --bottom 值。点击样式标签页可前往相应的 @position-try 部分。
  4. 点击 position-anchor 值链接或相同的 anchor() 实参。元素面板会选择具有相应 popovertarget 属性的元素，而样式标签页会显示该元素的 CSS。

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

如需修改值，请双击相应值。

查看元素的盒模型

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

盒模型图。

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

搜索和过滤元素的 CSS

使用样式和计算后标签页上的过滤条件框，搜索特定的 CSS 选择器（包括嵌套规则中的父选择器）、属性或值。

过滤“样式”标签页。

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

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

如需浏览计算型标签页，请选中分组，将过滤后的属性归入可折叠的类别中。

正在对过滤后的属性进行分组。

模拟所聚焦的网页

如果您将焦点从网页切换到开发者工具，某些叠加层元素（如果由焦点触发）会自动隐藏。例如，下拉列表、菜单或日期选择器。借助 模拟已聚焦的网页选项，您可以调试此类元素，就像它处于聚焦状态一样。

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

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

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

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

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

切换伪类

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

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

切换元素的悬停伪状态。

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

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

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

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

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

查看继承的高亮伪元素

伪元素可让您为元素的特定部分设置样式。突出显示伪元素是具有“已选择”状态的文档部分，它们会以“突出显示”样式呈现，以向用户指示此状态。例如，此类伪元素包括 ::selection、::spelling-error、::grammar-error 和 ::highlight。

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

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

  1. 检查以下文本。

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

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

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

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

查看级联层

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

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

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

级联层。

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

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

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

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

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

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

  1. 在开发者工具处于聚焦状态时，按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、ChromeOS），打开命令菜单。

  2. 开始输入 coverage。

    从命令菜单中打开“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. 在元素 > 样式标签页中，右键点击某个 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

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

此外，您可以：

使用代码补全功能更改 CSS

如果您想尝试更复杂的 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、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 即可。

更改长度值

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

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

  1. 将鼠标悬停在单元名称上，您会注意到该名称下方有下划线。

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

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

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

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

如需将值调整 10，请在拖动时按住 Shift。

向元素添加类

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

  1. 在 DOM 树中选择相应元素。
  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 树中选择相应元素。
  2. 打开元素类部分。请参阅向元素添加类。添加新类框下方是应用于此元素的所有类。
  3. 切换要启用或停用的类旁边的复选框。

添加样式规则

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

  1. 选择元素。
  2. 点击新建样式规则图标 新建样式规则。。开发者工具会在 element.style 规则下方插入一条新规则。

添加新的样式规则。

在屏幕截图中，开发者工具在点击新建样式规则后添加了 h1.devsite-page-title 样式规则。

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

添加新样式规则时，点击并按住新样式规则 新建样式规则。，选择要将样式规则添加到哪个样式表。

选择样式表。

切换声明

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

  1. 选择元素。
  2. 在 Styles 标签页中，将鼠标悬停在定义声明的规则上。每个声明旁边都会显示复选框。
  3. 选中或取消选中声明旁边的复选框。清除声明后，开发者工具会将其划掉，以表明该声明不再有效。

切换声明。

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

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

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

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

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

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

使用颜色选择器更改颜色

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

使用角度时钟更改角度值

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

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

  1. 选择带有角度声明的元素。

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

    角度预览。

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

  3. 点击预览即可打开角度时钟。

    角度时钟。

  4. 点击角度时钟圆圈，或滚动鼠标将角度值增加 / 减少 1，即可更改角度值。

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

使用“阴影编辑器”更改框和文字阴影

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

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

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

  2. 在样式标签页中，找到 text-shadow 或 box-shadow 声明旁边的阴影 Shadow。 图标。

    阴影图标。

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

    阴影编辑器。

  4. 更改阴影属性：

    • 类型（仅适用于 box-shadow）。选择外阴影或内阴影。
    • X 和 Y 偏移量。拖动蓝点或指定值。
    • 模糊处理。拖动滑块或指定一个值。
    • Spread（仅适用于 box-shadow）。拖动滑块或指定一个值。

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

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

缓动编辑器提供了一个 GUI，用于更改 transition-timing-function 和 animation-timing-function 的值。

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

  1. 选择一个具有时间函数声明的元素，例如此页面上的 <body> 元素。
  2. 在样式标签页中，找到 transition-timing-function、animation-timing-function 声明或 transition 简写属性旁边的紫色 轻松。 图标。 “缓动编辑器”图标。
  3. 点击相应图标以打开缓动效果编辑器： Easing Editor。

使用预设调整时间

如需一键调整时间，请使用加/减速编辑器中的预设：

  1. 在缓动效果编辑器中，如需设置关键字值，请点击其中一个选择器按钮：
    • linear 线性按钮。
    • ease-in-out “缓入缓出”按钮。
    • ease-in “缓入”按钮。
    • ease-out “缓出”按钮。

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

时间关键字 预设 三次贝塞尔曲线
淡入淡出 正弦，先慢后快再慢 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)
淡入 正弦，入 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)
淡出 Out, Sine 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)

配置自定义计时

如需为计时函数设置自定义值，请使用线条上的控制点：

  • 对于线性函数，点击线条上的任意位置即可添加控制点并拖动它。双击即可移除相应点。

    拖动线性函数的控制点。

  • 对于三次贝塞尔函数，请拖动其中一个控制点。

    拖动三次贝塞尔曲线函数的控制点。

任何更改都会触发编辑器顶部预览中的球动画。

（实验性）复制 CSS 更改

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

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

复制 CSS 声明更改。

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

复制所有 CSS 更改。

此外，您还可以通过更改标签页跟踪所做的更改。