CSS 功能参考

在以下与查看和更改 CSS 相关的Microsoft Edge DevTools 功能的综合参考中发现新的工作流。

若要了解基础知识，请参阅 开始查看和更改 CSS。

详细内容：

选择元素

DevTools 中的 元素 工具允许一次查看或更改一个元素的 CSS。 所选元素在 DOM 树中突出显示。 元素的样式显示在“ 样式 ”窗格中。 有关教程，请参阅 查看元素的 CSS。

所选元素的示例

在上图中：

  • DOM h1树 中突出显示的元素是所选元素。
  • 在右侧，元素的样式显示在“ 样式 ”窗格中。
  • 在左侧，元素在视区中突出显示，但仅仅是因为鼠标当前在 DOM 树中将鼠标悬停在它上方：

有多种方法可以选择元素：

  • 在呈现的网页中，右键单击页面元素，然后单击“ 检查”。

  • 在 DevTools 中，单击“选择元素 (选择元素) 或按 Ctrl+Shift+C (Windows、Linux) 或 Command+Shift+C (macOS) ，然后单击视区中的元素。

  • 在 DevTools 中，单击 DOM 树中的 元素。

  • 在 DevTools 中，在控制台中运行查询（例如document.querySelector('p')），右键单击结果，然后选择“在元素面板中显示”。

查看 CSS

使用 “元素>样式 ”和“ 计算 ”选项卡可以查看 CSS 规则并诊断 CSS 问题。

“ 样式 ”选项卡显示不同位置指向其他位置的链接，包括但不限于：

  • 在 CSS 规则旁边，指向样式表和 CSS 源。 此类链接将打开 “源” 工具。 如果样式表已缩小，请参阅使用 JavaScript 调试功能中的美观打印重新格式化缩小的 JavaScript 文件。

  • 在 “继承自 ”部分中，到父元素。

  • 在调用中 var() ，对自定义属性声明。 请参阅在 MDN ) 使用 CSS 自定义属性 (变量 。

  • 在简写属性中 animation ， 到 @keyframes。

  • 在文档工具提示中了解详细信息。

链接的样式可能有所不同。 如果不确定某个内容是否为链接，请尝试单击它来查找。

例如：

  1. 转到新窗口或选项卡中的 “To Do”应用 。

  2. 右键单击字符串“添加任务”上方的空白区域，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 选择“ 样式 ”选项卡。

    将显示各种类型的链接：

    突出显示了各种链接

使用 CSS 文档、特定性和自定义属性值查看工具提示

在 “元素” 工具中，将鼠标悬停在特定元素上时， “样式 ”选项卡会显示包含有用信息的工具提示。

查看 CSS 文档

若要显示 CSS 属性的说明，请在工具提示中：

  1. 转到新窗口或选项卡中的网页，例如 “To Do”应用。

  2. 右键单击字符串“添加任务”上方的空白区域，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 选择“ 样式 ”选项卡。

  4. 将鼠标悬停在 CSS 属性名称上，例如 padding:。

    将显示工具提示：

    工具提示，其中包含有关 CSS 属性的文档

    DevTools 从 VS Code 自定义数据 存储库中提取工具提示的说明。

  5. 在工具提示中，单击“ 了解详细信息 ”链接。

    此时会显示 MDN 中属性的 CSS 引用页，例如 padding CSS 属性。

若要关闭 CSS 工具提示，请执行以下操作：

  • 在工具提示中，选中“ 不显示 ”复选框。

若要再次打开 CSS 工具提示，请执行以下操作：

  1. 在 DevTools 中，选择“ 自定义和控制 DevTools”，然后选择“ 设置”。

  2. 在左侧的大纲中，选择“ 首选项”，然后向下滚动到 “元素” 部分。

  3. 选中“ 显示 CSS 文档工具提示 ”复选框。

视图选择器特定性

将鼠标悬停在 CSS 选择器上，以显示显示选择器特定权重的工具提示，例如： “特定性： (0,0,1) ：

例如：

  1. 转到新窗口或选项卡中的网页，例如 “To Do”应用。

  2. 右键单击网页，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 在 DOM 树中 <body> ，选择 元素。

  4. 在“ 样式 ”选项卡中，将鼠标悬停在 body CSS 选择器上。

    将显示一个工具提示，其中显示 具体性： (0,0,1) ：

    具有匹配选择器的特殊性权重的工具提示

另请参阅：

查看自定义属性的值

将鼠标悬停在函数上 var(--custom-property) 可查看工具提示中自定义属性的值。

例如：

  1. 转到新窗口或选项卡中的网页，例如 “To Do”应用。

  2. 右键单击网页，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 在 DOM 树中 <body> ，选择 元素。

  4. 在“ 样式 ”选项卡的 CSS 规则中 body ，将鼠标悬停在 上 --spacing。

    该值 .3rem 显示在工具提示中：

    工具提示中自定义属性的值

另请参阅：

查看定义规则的外部样式表

在“ 样式 ”窗格中，单击 CSS 规则旁边的链接，打开定义规则的外部样式表。 样式表将在“源”工具的“编辑器”窗格中打开。

如果样式表已缩小，请单击“编辑器”窗格底部的“格式 (格式) ”按钮。 有关详细信息，请参阅在 JavaScript 调试功能中使用 美观打印重新格式化缩小 的 JavaScript 文件。

查看定义规则的样式表

在上图中，单击 to-do-styles.css:5后，将前往 的第 5 to-do-styles.css行，其中 h1 定义了 CSS 规则。

查看无效、重写、非活动和其他 CSS

“ 样式 ”选项卡可识别多种类型的 CSS 问题，并采用不同的方式突出显示这些问题。

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

“ 样式 ”窗格显示应用于元素的所有规则，包括已重写的声明。 如果对重写声明不感兴趣，请使用“ 计算 ”窗格仅查看实际应用于元素的 CSS。

例如：

  1. 转到新窗口或选项卡中的网页，例如 “To Do”应用。

  2. 右键单击标题 “我的任务”，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具，并在 <h1> DOM 树中选择了元素。

  3. 在 “元素” 工具中，选择“ 计算 ”选项卡。

    将显示应用于所选元素的 CSS 属性：

    “计算”面板

    属性名称和斜体值指示在运行时计算的值。

  4. 若要显示所有属性，请选中“ 全部显示 ”复选框。

按字母顺序查看 CSS 属性

使用“ 计算 ”窗格。 请参阅上面的 仅查看实际应用于元素的 CSS。

查看继承的 CSS 属性

选中“计算”窗格中的“全部显示”复选框。 请参阅上面的 仅查看实际应用于元素的 CSS。

查看 CSS at-rules

at-rules 是允许你控制 CSS 行为的 CSS 语句。

在 “元素” 工具中，“ 样式 ”选项卡在专用节中显示以下规则：

查看 @property at-rules

CSS @property at-rule 允许在样式表中定义特定类型的 CSS 自定义属性。

将鼠标悬停在“ 样式 ”选项卡中此类属性的名称上，以查看包含：

  • 属性的值，例如 20%。
  • 属性的描述符，例如： initial value: 40%
  • “查看已注册的属性”链接，该链接指向“样式”选项卡底部的可@property折叠部分的注册。

例如：

  1. 在新窗口或选项卡中转到使用 @property at-rule 的页面，例如 “查看 @property 规则位置”。

  2. 右键单击 “项三 ”段落，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 在“ 样式 ”选项卡中，将鼠标悬停在该函数上 var(--itemSize) ：

    at-property CSS at-rule 的工具提示

    工具提示包含：

    • 属性的值，例如 100px。
    • 属性的描述符，例如初始值。
    • 查看已注册的属性链接。

  4. 单击“ 查看已注册的属性” 链接。

    展开 的“@property ”部分显示在“ 样式 ”选项卡中：

    at-property 部分中的 --itemSize

若要编辑规则 @property ，请双击其名称或值。 请参阅下面的 更改声明名称或值。

另请参阅：

查看 @supports at-rules

“ 样式 ”选项卡显示 @supports CSS at-rules（如果它们应用于元素）。

例如，若要查看规则，请执行以下操作 @supports ：

  1. 在新窗口或选项卡中，转到使用 @supports at-rule 的页面，例如 查看 @supports at-rules。

  2. 右键单击“我支持 CIE LAB 颜色空间！”，然后选择“ 检查”。

    DevTools 随即打开。 在 “元素” 工具的 DOM 树中， <div class="box"> 选择了 元素。 在“ 样式 ”选项卡中， @supports 列出了 CSS 声明：

    at-supports at-rule 的 HTML 结果

  • 如果浏览器支持 函数 lab() ，则 元素为绿色。

  • 如果浏览器不支持 lab() 函数，则 元素为紫色。

若要查看哪些浏览器版本支持 CIE LAB 颜色空间，请在 Caniuse.com 搜索“lab”。

查看 @scope at-rules

如果 “样式 ”选项卡应用于元素，则会显示 CSS @scope at-rules。

at-rules @scope 允许限定 CSS 样式的范围;也就是说，将样式显式应用于特定元素。 请参阅 MDN 的 CSS at-rule。@scope

若要查看规则，请执行以下操作 @scope ：

  1. 在新窗口或选项卡中，转到使用 @scope at-rule 的页面，例如 查看 @scope at-rules 演示：

    在规则范围内的 HTML & CSS 的结果

  2. 右键单击“我是位于卡上的文本”，然后选择“检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 选择“ 样式 ”选项卡。

  4. @scope检查规则：

    “样式”选项卡中的范围规则

    在此示例中， @scope (背景色 = 梅花) 规则将替代 (海蓝色) 的全局 CSS background-color 声明，这些 <p> 元素位于元素 (，例如 <div> 具有 card 类的) 。

    若要编辑 @scope 规则，请在规则中双击：

  5. 在“ 样式 ”选项卡中，双击 “梅花”，按 “删除”，然后选择 “米色”。

    演示网页中卡中的文本从梅花背景更改为米色背景。

查看 @font-palette-values at-rules

@font-palette-values CSS at-rule 允许自定义 (重写) 属性的font-palette默认值。 在 “元素” 工具中，“ 样式 ”选项卡在专用部分中显示此规则。

若要查看 @font-palette-values CSS 规则，请执行以下操作：

  1. 在新窗口或选项卡中，转到使用 @font-palette-values at-rule 的页面，例如 查看 @font-palette-values 规则 演示。

  2. 右键单击“新颜色”，然后选择“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 在“ 样式 ”选项卡中，找到 @font-palette-values CSS 规则：

    “样式”选项卡中的 at-font-palette-values 规则

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

    若要编辑自定义值，请双击它，如下所示：

  4. 在 @font-palette-values CSS 规则的 属性中 override-colors ，双击 0 gold, 1 red，然后输入 0 blue, 1 red。

    在检查的网页中，“新颜色”现在呈现为蓝色和红色。

查看 @position-try at-rules

CSS @position-try 规则和 position-try-fallbacks 属性可用于定义元素的备用定位点位置。

在 “元素” 工具中， “样式 ”选项卡解析并链接以下内容：

  • 属性值 position-try-fallbacks (或 position-try-options 属性值) 链接到专用 @position-try --name CSS 规则部分。

  • position-anchor属性值和anchor()参数链接到具有popovertarget特性的相应元素。

例如，检查 position-try-fallbacks 值和 @position-try CSS 规则，如下所示：

  1. 在新窗口或选项卡中，转到使用 position-try-fallbacks 值和 @position-try at-rule 的页面，例如 查看 @position-try at-rules 演示。

  2. 在呈现的网页中，打开子菜单;即，单击“ 你的帐户”，然后单击“ STOREFRONT”。

    显示子菜单，其中显示了一系列命令： LISTINGS、 SPECIAL OFFERS、 SIGN OUT。

  3. 在子菜单的“ 列表”上方右键单击，然后选择“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。 子菜单元素 <ul id="submenu"> 在 DOM 树中选择：

    at-position-try at-rule 的 HTML & CSS 的结果

  4. 在“ 样式 ”选项卡的 CSS 规则中 #submenu ，找到 position-try-fallbacks 属性，然后单击其 --bottom 值。

    “ 样式 ”选项卡向下滚动到相应的 @position-try 部分：

    “样式”选项卡中的 at-position-try 部分

  5. 在“ 样式 ”选项卡的 #submenu CSS 规则中，单击 --submenu 以下任一属性中的链接：

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    DOM 树选择具有) (<button popovertarget="submenu"> 相应 popovertarget 属性值的元素 () popovertarget="submenu" ，“ 样式 ”选项卡显示元素的 CSS：

    在 DOM 树中选择的按钮元素及其 CSS

若要编辑值，请双击该值。

另请参阅：

查看元素的框模型

若要查看元素的框模型，请转到 “样式 ”窗格，然后向下滚动。

若要更改值，请双击该值。

在下图中，“样式”窗格中的“框模型”关系图显示了当前所选h1元素的框模型：

框模型关系图

另请参阅：

搜索和筛选元素的 CSS

使用“样式”和“计算”窗格上的“筛选器”文本框可以搜索特定的 CSS 属性或值。

若要在“计算”窗格中搜索继承的属性，检查“全部显示”复选框。

在下图中， “样式 ”窗格经过筛选，仅显示包含搜索查询 color的规则。

筛选“样式”面板

在下图中，“ 计算 ”窗格经过筛选，仅显示包含搜索查询 100%的声明：

筛选“计算”面板

模拟重点页面

如果将焦点从检查的网页切换到 DevTools，则某些覆盖元素会自动隐藏（如果它们由焦点触发）。 例如：

  • 下拉列表。
  • 菜单。
  • 日期选取器。

若要像页面具有焦点一样调试此类元素，请执行以下操作之一：

  • 在 “元素” 工具的“ 样式 ”选项卡中，单击“ :hov (切换元素状态) ”，然后选中“ 模拟焦点页面 ”复选框。
  • 在 “呈现 ”工具中，选中“ 模拟焦点页面 ”复选框。

谨慎： 当此选项处于打开时， document.visibilityState 将 设置为 visible ，并且 visibilitychange 不会触发事件。 请参阅 MDN 中的页面可见性 API 。

若要尝试模拟重点页面，请执行以下操作：

  1. 在新窗口或选项卡中打开 “模拟重点页面 ”演示。

  2. 单击输入文本框。 或者，按 Tab 将焦点放在输入文本框上。

    另一个元素显示在输入文本框下，指出“此消息仅在文本框处于焦点时显示。

  3. 右键单击输入文本框，然后选择“ 检查”。

    DevTools 将打开，消息元素消失。 DevTools 窗口现在处于焦点中，而不是检查的网页，因此消息元素消失。

  4. 在 “元素” 工具的“ 样式 ”选项卡中，单击“ :hov (切换元素状态) ”，然后选中“ 模拟焦点页面 ”复选框。

  5. 确保输入文本框元素 <input id="textBox" type="text"> 仍处于选中状态。

    在输入文本框下，消息元素重新出现在输入文本框下方。

    现在，你可以检查输入文本框下方的消息元素，即使 DevTools（而不是检查的页面）具有焦点：

    “模拟焦点页面”复选框已选中

  6. 清理：在 “元素” 工具的“ 样式 ”选项卡中，单击“ :hov (切换元素状态) ，然后清除” 模拟焦点页面 “复选框。

“ 模拟焦点页面 ”复选框也会显示在 呈现 工具中;请参阅 呈现工具，了解具有不同显示选项或视觉缺陷的网页的外观。

另请参阅：

切换伪类

切换伪类：

  1. 转到新窗口或选项卡中的网页，例如 “To Do”应用。

  2. 输入任务，例如 任务 1。

  3. 右键单击网页，然后选择“ 检查”。

    DevTools 随即打开。

  4. 选择 “元素” 工具。

  5. 在 DOM 树中 <li class="task"> ，选择 元素。

  6. 选择“ 样式 ”选项卡。

  7. 在右上角，单击 “：hov”。

    将显示复选框。

  8. 选中要启用的伪类的复选框，例如 :hover：

    选择 ：hover 伪类

    在呈现的网页中，任务名称旁边的圆圈用复选标记填充，红色圆圈中的红色 X 显示在任务的右侧，就像将元素悬停在上方一样，即使元素实际上并未悬停在上。

“ 样式 ”选项卡显示所有元素的以下伪类：

此外，某些元素可能具有特定于元素的伪类。 选择此类元素时，“ 样式 ”选项卡会显示“ 强制特定元素状态 ”部分，你可以展开并打开特定于该元素的伪类，例如 ：read-write 复选框：

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

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

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

伪元素允许设置元素的特定部分的样式。 突出显示伪元素是具有“选定”状态的文档部分，它们被设置为“突出显示”，以向用户指示此状态。

例如，此类伪元素包括：

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

当多个样式发生冲突时，CSS 级联决定获胜的样式。 请参阅 MDN 上的 CSS 级联简介 。

若要更好地了解规则的继承和优先级，请在以下演示中查看继承的突出显示伪元素。

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

  1. 转到新窗口或选项卡中 的突出显示伪元素 演示。

  2. 选择文本“我继承了父突出显示伪元素的样式”的一部分。 选择我！

    所选文本在黄色背景上更改为红色文本。

  3. 右键单击文本“我继承了父级突出显示伪元素的样式。 选择“我！”，然后选择“ 检查”。

    DevTools 随即打开。 在 “元素” 工具的“ 样式 ”选项卡中，显示节： 继承自 div.text-parent 的 ：：selection 伪：

    在“样式”选项卡中查看“继承”部分

  4. 在 DOM 树中 <div class="text-parent"> ，选择 元素。

    在“ 样式 ”选项卡中，显示部分： 伪 ：：selection 元素：

    在“样式”选项卡中查看“伪”部分

另请参阅：

查看级联层

级联层可以更显式地控制 CSS 文件，以防止样式特定性冲突。 这适用于：

  • 大型基本代码。
  • 系统设计。
  • 管理第三方样式。

查看级联层：

  1. 转到使用级联层的网页，例如 级联层 演示。

  2. 右键单击“我的样式已分层！”元素，然后选择“ 检查”。

    DevTools 随即打开。

  3. 在 “元素” 工具中，选择“ 样式 ”选项卡。

  4. 在“ 样式 ”选项卡中，查看三个级联层及其样式： page、 component 和 base：

    级联层

  5. 若要查看层顺序，请单击 (页、 组件或 基本) 的层名称。 或者，单击“ 切换 CSS 层视图”图标“切换 CSS 层视图 ”按钮。

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

另请参阅：

在打印模式下查看页面

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

  1. 转到网页。

  2. 右键单击网页，然后选择“ 检查”。

    DevTools 随即打开。

  3. 按 Esc 一次或两次，以便 “快速视图 ”工具栏显示在 DevTools 的底部。

  4. 在“快速视图”工具栏上，选择“ (+) 的更多工具”。

  5. 选择 “呈现 ”工具。

    呈现工具将在 DevTools 底部的“快速视图”面板中打开。

  6. 在 “呈现 ”工具中，单击“ 模拟 CSS 媒体类型 ”下拉列表，然后选择“ 打印”。

    网页呈现方式与打印一样。

  7. 完成后，在 呈现 工具中，单击“ 模拟 CSS 媒体类型 ”下拉列表，然后选择“ 无仿真”。

使用“覆盖”工具查看已用和未使用的 CSS

“覆盖”工具显示页面实际使用的 CSS。

  1. 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开命令菜单，同时 DevTools 具有焦点。

  2. 开始键入 coverage，然后选择“ 显示覆盖范围”：

    从命令菜单打开“覆盖”工具

    “ 覆盖” 工具随即出现：

    “覆盖”工具

  3. 单击“ 开始检测覆盖率”并刷新页面 (开始检测覆盖率并刷新页面) 。 页面刷新和 覆盖率 工具概述了浏览器加载的每个文件中使用了多少 CSS (和 JavaScript) 。 绿色表示使用的 CSS。 红色表示未使用的 CSS。

    概述使用和未使用多少 CSS (和 JavaScript) ：

    使用和未使用 CSS (和 JavaScript) 的概述

  4. 若要逐行显示所用 CSS 的明细，请单击 CSS 文件。

    在下图中，第 145 到 147 行和 149 到 151 行 b66bc881.site-ltr.css 未使用，而使用行 163 到 166：

    已用和未使用的 CSS 的逐行细分

强制打印预览模式

请参阅 强制 DevTools 进入打印预览模式。

复制 CSS

从“样式”选项卡的单个下拉菜单中，可以复制单独的 CSS 规则、声明、属性或值;请参阅 MDN 上什么是 CSS？中的 CSS语法基础知识。

此外，还可以复制 JavaScript 语法中的 CSS 属性。 如果使用 CSS-in-JS 库，此选项非常方便;请参阅 CSS-in-JS 框架的样式编辑。

复制 CSS：

  1. 在新窗口或选项卡中转到使用 CSS 的网页，例如 “To Do”应用。

  2. 右键单击网页，然后单击“ 检查”。

    DevTools 随即打开，其中选择了 “元素” 工具。

  3. 在 DOM 树中，选择元素，例如 <h1>。

  4. 在“ 样式 ”选项卡的 CSS 规则中，右键单击 CSS 属性，例如 text-align: center：

    “复制 CSS”下拉菜单

  5. 选择右键单击菜单项：

    • 复制声明。 复制 CSS 语法中的 属性及其值： property: value;

    • Copy 属性。 仅复制名称 property 。

    • 复制值。 仅 value复制 。

    • 复制规则。 复制整个 CSS 规则： selector[, selector] { property: value; property: value; ... }

    • 复制声明为 JS。 复制 JavaScript 语法中的 属性及其值： propertyInCamelCase: 'value'

    • 复制所有声明。 复制 CSS 语法中的所有属性及其值： property: value; property: value; ...

    • 将所有声明复制为 JS。 复制 JavaScript 语法中的所有属性及其值： propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • 复制所有 CSS 更改。 复制所有声明的“ 样式 ”选项卡中所做的更改。 此菜单项有条件地显示。

    • 查看计算值。 转到“ 计算 ”选项卡;请参阅 仅查看上面实际应用于元素的 CSS。

更改 CSS

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

此外，还可以：

向元素添加 CSS 声明的两种方法

声明的顺序会影响元素的样式设置方式。 可以通过添加内联声明或向样式规则添加声明来添加声明。 以下各节介绍了这两种方法。

向元素添加内联 CSS 声明

添加内联声明等效于将 style 属性添加到元素的 HTML。 对于大多数方案，你可能希望使用内联声明。

内联声明具有比外部声明更高的特定性，因此使用内联声明可确保更改在特定的预期元素中生效。 有关特定性的详细信息，请参阅 MDN 的“特定性”中的选择器类型。

添加内联声明：

  1. 选择元素。

  2. 在“ 样式 ”窗格中，在 element.style 节的括号之间单击。 光标聚焦，允许输入文本。

  3. 输入属性名称，然后按 Enter。

  4. 输入该属性的有效值，然后按 Enter。 在 DOM 树中 style ，属性已添加到 元素。

或者，在属性字段中输入值，然后 DevTools 将建议匹配 属性的列表：要 从中进行选择的值对。 例如，如果在属性字段中输入 bold ，DevTools 将建议 font-weight: bold 和 font-weight: bolder 作为可能的规则。 按 Enter 应用规则。

在下图中， margin-top 和 background-color 属性已应用于所选元素。 在 DOM 树中，声明反映在 元素的 style 属性中。

添加内联声明

向现有样式规则添加 CSS 声明

如果要调试元素的样式，并且需要专门测试在不同位置定义声明时会发生什么情况，请将声明添加到现有样式规则。

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

  1. 选择元素。

  2. 在“ 样式 ”窗格中，在要添加声明的样式规则的括号之间单击。 光标聚焦，允许输入文本。

  3. 输入属性名称，然后按 Enter。

  4. 输入该属性的有效值，然后按 Enter。

向样式规则添加声明

更改声明名称或值

若要更改 CSS 声明的名称，请双击声明的名称。

若要更改 CSS 声明的值，请双击声明的值。 以下屏幕截图显示了从列表中选择值：

更改声明的值

若要更改数值，请键入值，或使用箭头键，根据下一部分。

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

若要更改 CSS 声明的数字值，请键入 值，或使用箭头键将值递增特定数量。 编辑声明的可枚举值（例如 ）时， font-size可以使用以下键盘快捷方式将值递增固定量：

组合键 操作
Alt+向上键 (Windows、Linux) 、Option+UpArrow (macOS) 递增 0.1。
向上键 如果当前值介于 -1 和 1 之间，则递增 1 或 0.1。
Shift+向上键 递增 10。
Ctrl+Shift+PgUp (Windows、Linux) 、Shift+Command+UpArrow (macOS) 递增 100。

若要递减，请按 向下键 (或) 向下 页 键，而不是 向上键 (或 上) 键。

更改长度值

可以使用指针更改具有长度值的任何属性，例如 width、、heightpadding、 margin或 border。

更改长度单位：

  1. 在新窗口或选项卡中打开使用 CSS 的网页，例如 “待办事项”应用。

  2. 右键单击文本 “添加任务”，然后选择“ 检查”。

    DevTools 随即打开，显示 “元素” 工具。 元素 <label> 在 DOM 树中选择。

  3. 在“ 样式 ”选项卡的 .new-task-form CSS 规则的 属性中 max-width: ，将鼠标悬停在 上 50rem。

    此时会显示一个工具提示，其中显示了等效的值和单位： 800px。

  4. 单击值 50rem。

    此时会显示工具提示：“使用鼠标滚轮或向上/向下键递增/递减。 Ctrl：+/-100、Shift：+/-10、Alt：+/-0.1”

  5. 移动鼠标滚轮，或按 UpArrow 和 DownArrow 键，同时按某个键：

    Ctrl：递增 100。 Shift：递增 10。 Alt：递增 0.1。

    在检查的网页中， “添加任务 输入”文本框将随着更改值而更改宽度。

  6. 在 max-width 属性的值字段中，使值 200px () 从 rem 单位更改为 px 单位。

  7. 再次移动鼠标滚轮，或按住 Ctrl (+/-100) 、Shift (+/-10) 或 Alt (+/-0.1) 键时按 UpArrow 和 DownArrow 键。

    在检查的网页中， “添加任务 输入”文本框在更改值时会更改宽度：

    更改输入文本框的最大宽度

向元素添加类

向元素添加类：

  1. 选择DOM 树中的 元素。

  2. 单击 “.cls”。

  3. 在 “添加新 类”文本框中输入类的名称。

  4. 按 Enter 键。

    “元素类”窗格

模拟浅色和深色主题首选项并启用自动深色模式

若要切换自动深色模式，或模拟用户对浅色或深色主题的首选项，请执行以下操作：

  1. 在 “元素” 工具的“ 样式 ”选项卡中，单击右上角的“ 切换常用呈现仿真 (画笔”图标) 按钮：

    切换常见呈现仿真

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

    • prefers-color-scheme：浅色。 指示用户首选浅色主题。

    • prefers-color-scheme：深色。 指示用户首选深色主题。

    • 自动深色模式。 以深色模式显示页面，即使未实现。 此外，将 设置为 prefers-color-schemedark 自动。

此下拉列表是“模拟 CSS 媒体”功能和prefers-color-scheme“启用呈现工具的自动深色模式”选项的快捷方式。

另请参阅：

切换类

若要对元素启用或禁用类，请：

  1. 选择DOM 树中的 元素。

  2. 打开“ 元素类 ”窗格。 请参阅 将类添加到元素。 “ 添加新类 ”文本框下方是应用于此元素的所有类。

  3. 切换要启用或禁用的类旁边的复选框。

添加样式规则

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

  1. 选择元素。

  2. 单击“ 新建样式规则 ” (“新建样式规则 ”) 。 DevTools 在 element.style 规则下插入新规则。

    在下图中，DevTools 在单击“新建样式规则”后添加h1.devsite-page-title样式规则。

    添加新样式规则

选择要向其添加规则的样式表

默认情况下，添加样式规则时，DevTools 会在文档中创建名为 inspector-stylesheet 的新样式表，然后在此样式表中添加新样式规则。

若要改为在现有样式表中添加规则，请执行以下操作：

  • 单击并按住 “新建样式规则 ” (“新建样式规则 ”) 然后从列表中选择样式表以向其添加样式规则。

选择样式表

将样式规则添加到样式表中的特定位置

默认情况下，通过单击“新建样式规则” (“新建样式规则”图标来添加样式规则，) 按钮在样式表的 inspector-stylesheetelement.style 规则下插入新规则。

从“样式”窗格开始，在特定样式表的特定位置添加 样式 规则：

  1. 在 “元素” 工具的“ 样式 ”选项卡中，将鼠标悬停在要添加新样式规则的正上方的样式规则上。

    CSS 规则 的右侧会显示“在下方 插入样式规则 (图标) 按钮下方插入样式规则。

  2. 单击“ 在下方插入样式规则 (在下方插入样式规则”图标) 按钮：

    在下方插入样式规则

切换声明

打开或关闭单个声明：

  1. 选择元素。

  2. 在“ 样式 ”窗格中，将鼠标悬停在定义声明的规则上。 每个声明旁边会显示一个复选框。

  3. 选中或清除声明旁边的复选框。 清除声明时，DevTools 会将其划出，以指示声明不再处于活动状态。

    在下图中， margin-top 当前所选元素的 属性已关闭。

    切换声明

在 ::view-transition 动画期间编辑伪元素

请参阅：

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

请参阅：

使用颜色选取器更改颜色

颜色选取器提供用于更改color和background-color声明的用户界面。

打开 颜色选取器：

  1. 选择元素。

  2. 在“ 样式 ”窗格中，找到要更改的 color、 background-color或类似声明。 在 、 background-color或类似值的左侧color，有一个小正方形，它是颜色的预览。

    在下图中，左侧 rgba(0, 0, 0, 0.7) 的小正方形是该颜色的预览。

    颜色预览

  3. 单击预览以打开 颜色选取器。

    颜色选取器

下图和列表描述了 颜色选取器的每个 UI 元素。

颜色选取器，带批注

标注 组件 说明
1 色调
2 滴管 使用吸管对页面的颜色采样
3 复制到剪贴板 将 “显示值 ”复制到剪贴板。
4 显示值 颜色的 RGBA、HSLA 或十六进制表示形式。
5 调色板 单击正方形可更改颜色。
6 色调
7 不透明度
8 显示值切换器 在当前颜色的 RGBA、HSLA 和十六进制表示形式之间切换。
9 调色板切换器 在“材料设计”调色板、自定义调色板或页面调色板之间切换。 DevTools 基于它在样式表中找到的颜色生成页面调色板。

另请参阅：

使用吸管对页面的颜色采样

若要将所选颜色更改为页面上的其他颜色，请执行以下操作：

  1. 单击“ 吸管” 图标 (“ 取水管”) 。 光标变为放大镜。

  2. 将鼠标悬停在屏幕上的任意位置具有要采样的颜色的像素上。

  3. 单击以确认。

    在下图中， 颜色选取器 显示当前颜色值 rgba(0,0,0,0.7)，该值接近黑色。 单击后，特定颜色将更改为当前在视区中突出显示的黑色版本。

    使用吸管器

另请参阅：

使用角度时钟更改角度值

Angle Clock 提供了一个用户界面，用于更改 CSS 属性值中的角度量。

打开 角度时钟：

  1. 选择包含角度声明的元素。

  2. 在“ 样式 ”窗格中，找到 transform 要更改的 或 background 声明。 单击角度值旁边的“ 角度预览 ”框。

    在下图中，左侧 100deg 的小时钟是角度预览。

  3. 单击预览以打开 角度时钟：

    角度预览

  4. 通过单击“ 角度时钟 ”圆来更改角度值，或滚动鼠标以增加或减小角度值 1。

还有更多键盘快捷方式可用于更改角度值。 有关详细信息，请参阅 “样式”窗格的键盘快捷方式。

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

使用阴影编辑器更改 HTML 元素上的 或 text-shadow CSS 属性的值box-shadow：

  1. 选择具有 或 text-shadow 声明的box-shadow元素。

    例如，在新选项卡或窗口中打开 1DIV 演示页 ，右键单击页面并选择“ 检查 ”以打开 DevTools，然后在 “元素” 工具中选择元素 <div class="demos"> 。

  2. 在“ 样式 ”窗格的 .demos CSS 规则中，找到 box-shadow 声明，然后单击其“ 打开阴影编辑器 ” (“ 阴影编辑器”按钮图标) 按钮。

    “阴影编辑器”随即打开：

    阴影编辑器

  3. 更改阴影属性，如下所示：

    属性 如何更改
    Type 选择“ 开始 ”或“ 嵌入”。 box-shadow仅适用于 。
    X 偏移量 在文本框中指定值，或拖动蓝点。
    Y 偏移量 在文本框中指定值，或拖动蓝点。
    Blur 在文本框中指定值，或拖动滑块。
    传播 在文本框中指定值，或拖动滑块。 box-shadow仅适用于 。

    更改将实时应用于呈现网页中的 元素：

    在阴影编辑器中所做的更改的效果

使用缓动编辑器编辑动画和切换计时

使用 缓动编辑器 更改 HTML 元素上的 animation-timing-function 或 transition-timing-function 属性的值。

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

  1. 在 DevTools 的 “元素” 工具的 DOM 树中，选择应用了 CSS 动画或过渡的元素。

    例如，在新选项卡或窗口中打开 动画属性演示页 ，右键单击包含动画的绿色框，然后选择“ 检查”。

    DevTools 随即打开，显示 “元素” 工具。

  2. 按 Ctrl+F 并找到“spinner”，然后选择 <div class="spinner"> 位于 中的 <div class="animation-demo good">元素。

    此演示页上的红色 (坏) 和绿色 (良好) 框是两种不同的 CSS 动画。 这两个动画使用 animation CSS 属性通过 CSS 运行，并定义 ease-in-out 计时函数。

  3. 在“ 样式 ”选项卡的 .good .spinner “CSS 规则”的 animation 声明中，单击左侧的 ease-in-out“ 打开三次方贝塞尔编辑器 (立方贝塞尔编辑器”图标) 按钮。

    缓动编辑器随即打开：

    缓动编辑器

使用预设调整计时

若要通过简单的鼠标单击来调整计时，请使用 缓动编辑器中的预设：

  1. 打开缓动编辑器，如上面 使用缓动编辑器编辑动画和切换计时中所述。

  2. 单击四个选取器按钮之一：

    按钮 函数类型 CSS 关键字 (keyword)
    线性缓动函数 线性函数 linear
    缓入缓动函数 轻松执行函数 ease-in-out
    缓动函数 轻松函数 ease-in
    缓动函数 缓出函数 ease-out

    选择按钮会在 CSS 规则 (设置一个关键字 (keyword) 值，如果在下一步) 中选择变量预设，则“预设切换器”将在缓动编辑器底部打开。

  3. 在 预设切换器中，单击 “向左< ”或“ 向右> ”按钮，选取以下预设之一：

    • 线性预设： elastic、 bounce或 emphasized。

    • 立方贝塞尔预设：

    计时关键字 (keyword) 预设 立方贝塞尔
    ease-in-out In Out，正弦值 cubic-bezier(0.45, 0.05, 0.55, 0.95)
    ease-in-out In Out，二次 cubic-bezier(0.46, 0.03, 0.52, 0.96)
    ease-in-out In Out，Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    ease-in-out 快出、慢进 cubic-bezier(0.4, 0, 0.2, 1)
    ease-in-out 在 Out，Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    计时关键字 (keyword) 预设 立方贝塞尔
    ease-in In、正弦值 cubic-bezier(0.47, 0, 0.75, 0.72)
    ease-in In，二次 cubic-bezier(0.55, 0.09, 0.68, 0.53)
    ease-in In、Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    ease-in In、Back cubic-bezier(0.6, -0.28, 0.74, 0.05)
    ease-in 快出，线性输入 cubic-bezier(0.4, 0, 1, 1)
    计时关键字 (keyword) 预设 立方贝塞尔
    ease-out Out、正弦值 cubic-bezier(0.39, 0.58, 0.57, 1)
    ease-out Out，二次 cubic-bezier(0.25, 0.46, 0.45, 0.94)
    ease-out Out、Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    ease-out 线性输出，慢进 cubic-bezier(0, 0, 0.2, 1)
    ease-out Out、Back cubic-bezier(0.18, 0.89, 0.32, 1.28)

另请参阅：

配置自定义计时

若要设置计时函数的自定义值，请在以下行上使用控制点：

  • 对于线性函数，请单击线条上的任意位置以添加并拖动控件点。 若要删除控制点，请双击它。

    拖动线性函数的控制点

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

    拖动立方贝塞尔函数的控制点

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

另请参阅

演示：

MDN：

GitHub：

Web.dev：

面向开发人员的 Chrome 博客：

Chrome 文档：

material.io：

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。

  • Last updated on