CSS 功能参考

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

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

详细内容：

• 选择元素
• 查看 CSS
  • 使用链接导航
  • 查看包含 CSS 文档、特异性和自定义属性值的工具提示
    • 查看 CSS 文档
    • 查看选择器特异性
    • 查看自定义属性的值
  • 查看已定义规则的外部样式表
  • 查看无效、已替代、非活动和其他 CSS
  • 仅查看实际应用于元素的 CSS
  • 按字母顺序查看 CSS 属性
  • 查看继承的 CSS 属性
  • 查看 CSS at-rules
    • 查看 @property 按规则
    • 查看 @supports 按规则
    • 查看 @scope 按规则
    • 查看 @font-palette-values 按规则
    • 查看 @position-try 按规则
  • 查看元素的框模型
  • 搜索和筛选元素的 CSS
  • 模拟获得焦点的页面
  • 切换伪类
  • 查看继承的突出显示 伪元素
  • 查看级联层
  • 在打印模式下查看页面
  • 使用覆盖工具查看已使用和未使用的 CSS
  • 强制打印预览模式
• 复制 CSS
• 更改 CSS
  • 向元素添加 CSS 声明的两种方法
    • 向元素添加内联 CSS 声明
    • 将 CSS 声明添加到现有样式规则
  • 更改声明名称或值
  • 使用键盘快捷方式更改可枚举值
  • 更改长度值
  • 向元素添加类
  • 模拟浅色和深色主题首选项并启用自动深色模式
  • 切换类
  • 添加样式规则
    • 选择要向其添加规则的样式表
    • 向样式表中的特定位置添加样式规则
  • 切换声明
  • 在动画期间编辑 ::view-transition 伪元素
  • 将网格项及其内容与网格编辑器对齐
  • 使用颜色选取器更改颜色
  • 用“取色器”在页面上打样着色
  • 使用角度时钟更改角度值
  • 使用阴影编辑器更改框和文本阴影
  • 使用缓动编辑器编辑动画和切换计时
    • 使用预设调整计时
    • 配置自定义计时
• 另请参阅

选择元素

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

在上图中：

• h1 DOM 树中突出显示的元素是所选元素。
• 在右侧，元素的样式显示在 “样式” 窗格中。
• 在左侧，元素在视区中突出显示，但这只是因为鼠标当前在 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. 在新窗口或选项卡中转到“ 待办事项”应用 。

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

   将显示各种类型的链接：

   

查看包含 CSS 文档、特异性和自定义属性值的工具提示

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

查看 CSS 文档

若要在工具提示中显示 CSS 属性的说明，请执行以下操作：

1. 在新窗口或选项卡中转到网页，例如 待办事项应用。

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

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

   将显示工具提示：

   

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

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

   将显示 MDN 处属性的 CSS 引用页，例如 padding CSS 属性。

若要关闭 CSS 工具提示：

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

若要再次打开 CSS 工具提示：

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

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

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

查看选择器特异性

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

例如：

1. 在新窗口或选项卡中转到网页，例如 待办事项应用。

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

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

   显示工具提示，显示 特异性： (0,0,1) ：

   

另请参阅：

• 特异性 - MDN。

查看自定义属性的值

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

例如：

1. 在新窗口或选项卡中转到网页，例如 待办事项应用。

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

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

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

   

另请参阅：

• 自定义属性 (--*) ： CSS 变量 - MDN。

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

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

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

在上图中，单击 to-do-styles.css:5后，将会带你到定义 CSS 规则的第 h1 5 to-do-styles.css行。

查看无效、已替代、非活动和其他 CSS

“ 样式” 选项卡可识别多种 CSS 问题，并以不同方式突出显示它们。

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

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

例如：

1. 在新窗口或选项卡中转到网页，例如 待办事项应用。

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

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

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

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

   

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

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

按字母顺序查看 CSS 属性

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

查看继承的 CSS 属性

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

查看 CSS at-rules

At-rules 是 CSS 语句，可用于控制 CSS 行为。

在 元素 工具中， 样式 选项卡在专门部分中显示以下 at-rules：

• @property- 请参阅下面的“查看规则”@property。
• @supports- 请参阅下面的“查看规则”@supports。
• @scope- 请参阅下面的“查看规则”@scope。
• @font-palette-values- 请参阅下面的“查看规则”@font-palette-values。
• @position-try- 请参阅下面的“查看规则”@position-try。

查看 @property 按规则

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

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

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

例如：

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

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

   

   工具提示包含：

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

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

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

   

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

另请参阅：

• @property：Web.dev 赋予 CSS 变量超能力 。
• 自定义属性 (--*) ： MDN 中的 CSS 变量。

查看 @supports 按规则

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

例如，若要查看规则：@supports

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

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

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

   

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

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

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

查看 @scope 按规则

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

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

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

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

   

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

4. 检查 @scope 规则：

   

   在此示例中，@scope对于元素 (（例如具有card类的 <div>) ）内的任何<p>元素， (background color = plum) 的规则将替代全局 CSS background-color 声明 (海蓝宝石) 。

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

5. 在“ 样式 ”选项卡中，双击 plum，按 Delete，然后选择米 色。

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

查看 @font-palette-values 按规则

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

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

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

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

   

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

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

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

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

查看 @position-try 按规则

@position-try借助 CSS 规则以及position-try-fallbacks属性，可以定义元素的备用定位点位置。

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

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

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

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

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

2. 在呈现的网页中，打开子菜单;也就是说，单击“ 你的帐户”，然后单击“ 店面”。

   将显示子菜单，显示命令列表：LISTINGS、SPECIAL OFFERS、SIGN OUT。

3. 在子菜单中，右键单击 LISTINGS 上方，然后选择 检查。

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

   

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

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

   

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

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

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

   

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

另请参阅：

• @position-try CSS at-rule， at MDN.

查看元素的框模型

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

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

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

另请参阅：

• MDN 的框模型。

搜索和筛选元素的 CSS

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

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

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

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

模拟获得焦点的页面

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

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

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

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

警告： 当此选项打开时，设置为 document.visibilityStatevisible ，并且 visibilitychange 不会触发该事件。 请参阅 MDN 中的 页面可见性 API 。

要尝试模拟获得焦点的页面：

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

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

   另一个元素显示在输入文本框下，显示“此消息仅在文本框聚焦时显示”。

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

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

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

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

   在输入文本框下，消息元素将重新显示在输入文本框下方。

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

   

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

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

另请参阅：

• 冻结屏幕 & 检查消失的元素，在面向开发人员的 Chrome 博客中。

切换伪类

要切换伪类：

1. 在新窗口或选项卡中转到网页，例如 待办事项应用。

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

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

   DevTools 随即打开。

4. 选择 “元素” 工具。

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

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

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

   将显示复选框。

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

   

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

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

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

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

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

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

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

例如，此类伪元素是：

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

当多个样式冲突时，CSS 级联将确定获胜样式。 请参阅 MDN 中的 CSS 级联简介 。

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

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

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

2. 选择文本“我继承了父母高光伪元素的样式。 选择我！

   所选文本将更改为黄色背景的红色文本。

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

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

   

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

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

   

另请参阅：

• MDN 中的伪元素。

查看级联层

借助级联层，可以更明确地控制 CSS 文件，以防止样式特定性冲突。 这对于以下情况非常有用：

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

要查看级联层：

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

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

   DevTools 随即打开。

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

4. 在 样式 选项卡中，查看三个级联图层及其样式： page， component 以及 base：

   

5. 要查看图层顺序，请单击 页面、 组件或 基础) (图层名称。 或者，单击““切换 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) 的概述：

   

4. 若要显示已使用 CSS 的逐行分类，请单击 CSS 文件。

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

   

强制打印预览模式

请参阅 强制开发工具进入打印预览模式。

复制 CSS

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

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

复制 CSS：

1. 在新窗口或选项卡中转到使用 CSS 的网页，如 待办事项应用。

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

   DevTools 随即打开，并选择“ 元素” 工具。

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

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

   

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

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

   • 复制属性. 仅 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 保存到工作区中的本地源。 请参阅 在工作区中编辑和保存文件 (源工具 工作区选项卡) 。

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

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

向元素添加内联 CSS 声明

添加内联声明相当于向元素的 HTML 添加 style 属性。 对于大多数方案，可能想要使用内联声明。

内联声明比外部声明具有更高的特异性，因此使用内联声明可确保更改在特定的预期元素中生效。 有关特异性的详细信息，请参阅 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+向上键 (macOS)	递增 0.1。
向上键	递增 1，如果当前值介于 -1 和 1 之间，则递增 0.1。
Shift+向上键	递增 10。
Ctrl+Shift+PgUp (Windows、Linux) 、Shift+Command+向上键 (macOS)	递增 100。

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

更改长度值

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

若要更改长度单位，请执行以下操作：

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

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

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

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

   将显示工具提示，显示等效值和单位： 800px。

4. 单击值 50rem。

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

5. 移动鼠标滚轮，或按 向上键 和 向下键 ，同时按某个键：

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

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

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

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

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

   

向元素添加类

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

1. 在 DOM 树中选择元素。

2. 单击 .cls。

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

4. 按 Enter 键。

   

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

若要切换自动深色模式，或模拟用户对浅色或深色主题的偏好：

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

   

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

   • prefers-color-scheme： 浅色。 指示用户更喜欢浅色主题。

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

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

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

另请参阅：

• 使用“模拟渲染页面中的深色或浅色方案”中的“渲染”工具模拟深色或浅色模式。
• 检查深色主题和浅色主题的对比度问题
• Chrome 开发人员博客中的“自动深色”主题。
• prefers-color-scheme：你好黑暗，我在 web.dev 的老朋友 。

切换类

要在元素上启用或禁用类，请执行以下操作：

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 伪元素

请参阅：

• 在 Chrome 文档中的动画中编辑 ：：view-transition 伪元素 动画：检查和修改 CSS 动画效果。
• 使用 Chrome 文档中的 View Transition API 实现平滑过渡。

将网格项及其内容与网格编辑器对齐

请参阅：

• 对齐网格项及其内容：“检查 CSS 网格布局”中的网格编辑器弹出窗口。

使用颜色选取器更改颜色

颜色选取器为更改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 根据在样式表中所找到的颜色来生成页面调色板。

另请参阅：

• 颜色用法和调色板 material.io 的颜色系统：材质设计调色板。

用“取色器”在页面上打样着色

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

1. 单击“ 取色器 ”) (“ 器”图标。 光标变为放大镜。

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

3. 单击以确认。

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

   

另请参阅：

• 使用颜色选取器测试文本颜色对比度

使用角度时钟更改角度值

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

要打开 角度时钟：

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

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

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

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

   

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

有更多键盘快捷方式可用于更改角度值。 请在 “样式”窗格键盘快捷方式中了解详细信息。

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

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

1. 选择带有 OR text-shadow 声明的box-shadow元素。

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

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

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

   缓 动编辑器 将打开：

   

使用预设调整计时

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

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

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

   按钮	函数类型	CSS 关键字 (keyword)
   	线性函数	linear
   	缓入功能	ease-in-out
   	缓入功能	ease-in
   	缓出函数	ease-out

   选择按钮会在 CSS 规则 (中设置一个关键字 (keyword) 值，如果你在下一步) 中选择变体预设，该值会有所不同，并且预设切换器将在缓动编辑器的底部打开。

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

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

   • 三次贝塞尔预设：

   计时关键字 (keyword)	预设	三次贝塞尔
   缓入-退出	输入输出，正弦	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)

   计时关键字 (keyword)	预设	三次贝塞尔
   缓入	in，sine	cubic-bezier(0.47, 0, 0.75, 0.72)
   缓入	In，二次	cubic-bezier(0.55, 0.09, 0.68, 0.53)
   缓入	In， Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
   缓入	In、Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
   缓入	快速输出，线性输入	cubic-bezier(0.4, 0, 1, 1)

   计时关键字 (keyword)	预设	三次贝塞尔
   ease-out	输出，正弦波	cubic-bezier(0.39, 0.58, 0.57, 1)
   ease-out	Out， Quadratic	cubic-bezier(0.25, 0.46, 0.45, 0.94)
   ease-out	输出，立方	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 的贝塞尔曲线。

配置自定义计时

要为计时功能设置自定义值，请使用线条上的控制点：

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

  

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

  

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

另请参阅

• 开始查看和更改 CSS。
• 查看元素的 CSS。
• 在 JavaScript 调试功能中使用非常打印重新设置缩小的 JavaScript 文件。
• 呈现工具，用于查看具有不同显示选项或视觉缺陷的网页的外观。
• 向类添加伪状态。
• 命令菜单
• 强制开发工具进入打印预览模式。
• 使用本地副本替代网页资源 (“替代”选项卡) 。
• 在工作区中编辑和保存文件 (源工具 “工作区”选项卡) .
• 使用“模拟渲染页面中的深色或浅色方案”中的“渲染”工具模拟深色或浅色模式。
• 检查深色主题和浅色主题的对比度问题
• 对齐网格项及其内容：“检查 CSS 网格布局”中的网格编辑器弹出窗口。
• 使用颜色选取器测试文本颜色对比度
• 样式窗格键盘快捷方式。

演示：

• 待办事项应用
• 查看 @property 按规则
• 查看 @supports 按规则
• 查看 @scope 按规则
• 查看 @font-palette-values 按规则
• 查看 @position-try 按规则
• 模拟获得焦点的页面
• 突出显示伪元素
• 级联层
• 1DIV
• 动画属性演示页面

MDN：

• 使用 CSS 自定义属性 (变量)
• padding CSS 属性
• 特异性
• 自定义属性 (--*) ：CSS 变量
  • 自定义属性 (--*) ：CSS 变量
• @scope CSS at-rule
• @position-try CSS at-rule
• @font-palette-values CSS at-rule
• 框模型
• 页面可见性 API
• :active
• :focus
• :focus-within
• :target
• :hover
• :focus-visible
• CSS 级联简介
• 伪元素
• 级联层。
• CSS 语法基础知识 什么是 CSS？
• 特定性中的选择器类型。
• animation-timing-function
• transition-timing-function
• 贝塞尔曲线

GitHub：

• VS Code 自定义数据 - “microsoft / vscode-custom-data”存储库。

Web.dev：

• @property：赋予 CSS 变量超能力
• prefers-color-scheme： 你好黑暗，我的老朋友

面向开发人员的 Chrome 博客：

• 冻结屏幕 & 检查消失的元素
• 自动深色主题

Chrome 文档：

• 在 Chrome 文档中的动画中编辑 ：：view-transition 伪元素 动画：检查和修改 CSS 动画效果。
• 使用 Chrome 文档中的 View Transition API 实现平滑过渡。

material.io：

• 颜色用法和调色板颜色系统：材质设计调色板。

注意

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

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