阅读这篇关于查看和更改 CSS 的 Chrome 开发者工具功能的综合参考文档,了解新的工作流。
要了解基础知识,请参阅查看和更改 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 说明的提示,请将鼠标悬停在样式标签页中的属性名称上。
点击了解详情,找到关于此资源的 MDN CSS 参考文档。
如需关闭提示,请选中 不显示。
如需重新开启,请依次选择 Settings > Preferences > Elements > 显示 CSS 文档提示。
查看选择器的特异性
查看自定义属性的值
将鼠标悬停在 --custom-property
上,即可在提示中查看其值。
查看无效、被替换、无效和其他 CSS
样式标签页可识别多种 CSS 问题,并以不同的方式突出显示这些问题。
请参阅了解“样式”标签页中的 CSS。
仅查看实际应用于某个元素的 CSS
Styles 标签页会显示适用于某个元素的所有规则,包括已被替换的声明。如果您对被替换的声明不感兴趣,可以使用已计算标签页来仅查看实际应用于某个元素的 CSS。
- 选择一个元素。
- 转到元素面板中的已计算标签页。
选中全部显示复选框即可查看所有属性。
按字母顺序查看 CSS 属性
使用计算出的样式标签页。请参阅仅查看实际应用于元素的 CSS。
查看继承的 CSS 属性
选中已计算标签页中的全部显示复选框。请参阅仅查看实际应用于元素的 CSS。
或者,滚动样式标签页,然后找到名为 Inherited from <element_name>
的部分。
查看 CSS at-rules
at-rules 是 CSS 语句,可让您控制 CSS 行为。元素 > 样式会在专门的部分中显示以下 @ 规则:
查看 @property
项 @ 规则
通过 @property
CSS @ 规则,您可以明确定义 CSS 自定义属性,并在样式表中注册这些属性,而无需运行任何 JavaScript。
将鼠标悬停在 Styles 标签页中此类属性的名称上,即可在 Styles 标签页底部的可收起 @property
部分中看到一个提示,其中包含该属性的值、描述符以及指向其注册的链接。
如需修改 @property
规则,请双击其名称或值。
查看 @supports
项 @ 规则
如果已将 @supports
CSS 应用于某个元素,Styles 标签页会显示 @ 规则。例如,检查以下元素:
如果您的浏览器支持 lab()
函数,则该元素为绿色,否则为紫色。
查看 @scope
项 @ 规则
如果对元素应用了 CSS @scope
规则,样式标签页会显示出来。
新的 @scope
@ 规则是 CSS 级联和继承 6 级规范的一部分。这些规则允许您限定 CSS 样式的范围,也就是说,明确地将样式应用于特定元素。
请在以下预览中查看 @scope
规则:
- 在预览页面中检查卡片上的文字。
- 在样式标签页中,找到
@scope
规则。
在此示例中,@scope
规则会针对使用 card
类的元素替换所有 <p>
元素的全局 CSS background-color
声明。
如需修改 @scope
规则,请双击相应规则。
查看 @font-palette-values
项 @ 规则
借助 @font-palette-values
CSS @ 规则,您可以自定义 font-palette
属性的默认值。元素 > 样式会在专门的部分中显示此 @ 规则。
在下一预览中查看 @font-palette-values
部分:
- 在预览中检查文本的第二行。
- 在样式中,找到
@font-palette-values
部分。
在此示例中,--New
字体调色板值会替换彩色字体的默认值。
要修改您的自定义值,请双击它们。
查看 @position-try
项 @ 规则
借助 @position-try
CSS 规则和 position-try-options
属性,您可以为元素定义备用锚点位置。如需了解详情,请参阅 CSS Anchor Positioning API 简介。
元素 > 样式会解析 position-try-options
值,并将每个选项关联到专用的 @position-try --name
部分。
在下一个预览中检查 position-try-options
值和 @position-try
部分:
- 在预览中,打开子菜单,即依次点击您的帐号和店面。
- 在预览中使用
id="submenu"
检查相应元素。 - 在样式中,找到
position-try-options
属性,然后点击其--bottom
值。Styles 标签页会将您转到相应的@position-try
部分。
要修改该部分的值,请双击相应的值。
查看元素的框模型
如需查看元素的框模型,请前往样式标签页,然后点击操作栏中的 显示边栏按钮。
若要更改某个值,请双击该值。
搜索和过滤元素的 CSS
使用样式和已计算标签页上的过滤框来搜索特定的 CSS 属性或值。
要在计算型标签页中搜索继承的属性,请勾选全部显示复选框。
如需浏览计算型标签页,请选中分组,将过滤后的属性归入可收起的类别。
模拟聚焦的网页
如果您将焦点从页面切换到开发者工具,某些叠加层元素在焦点触发时会自动隐藏。例如,下拉列表、菜单或日期选择器。借助 check_box 模拟聚焦的页面选项,您可以对此类元素进行调试,使其获得焦点。
请尝试在此演示页面上模拟聚焦的页面:
- 聚焦于输入元素。下方出现了另一个元素。
- 打开开发者工具。此时,开发者工具窗口(而非页面)获得焦点,因此该元素会再次消失。
- 在元素 > 样式中,点击 :hov,勾选模拟聚焦的网页check_box,并确保元素处于选中状态。现在,您可以检查它下面的元素了。
您还可以在“渲染”面板中找到同一选项。
切换伪类
如需切换伪类(例如 :active
、:focus
、:focus-within
、:target
、:hover
、:visited
或 focus-visible
),请执行以下操作:
- 选择一个元素。
- 在元素面板上,转到样式标签页。
- 点击 :hov。
- 选中要启用的伪类。
在视口中,可以看到,即使元素实际上并未悬停在上面,开发者工具也会对元素应用 background-color
声明。
有关互动式教程,请参阅向类添加伪状态。
查看继承的突出显示伪元素
伪元素可用于设置元素特定部分的样式。突出显示伪元素是处于“已选择”状态的文档部分,它们的样式为“突出显示”,以向用户表明此状态。例如,此类伪元素有 ::selection
、::spelling-error
、::grammar-error
和 ::highlight
。
如规范中所述,当多种样式发生冲突时,级联会决定胜出的样式。
为了更好地了解规则的继承情况和优先级,您可以查看继承的突出显示伪元素:
-
我继承了父级的突出显示伪元素的样式。选择我!
选择上方文字的一部分。
在 Styles 标签页中,向下滚动以找到
Inherited from ::selection pseudo of...
部分。
查看级联层
借助级联层,您可以更明确地控制 CSS 文件,防止出现样式特异性冲突。这对于大型代码库、设计系统以及在应用中管理第三方样式非常有用。
如需查看级联层,请inspect下一个元素,然后依次打开 Elements > Styles。
在 Styles 标签页中,查看 3 个级联层及其样式:page
、component
和 base
。
要查看层顺序,请点击层名称或 切换 CSS 层视图按钮。
page
层具有最高特异性,因此元素的背景为绿色。
在打印模式下查看网页
要在打印模式下查看网页,请执行以下操作:
- 打开命令菜单。
- 开始输入
Rendering
,然后选择Show Rendering
。 - 在 Emulate CSS Media 下拉菜单中,选择 print。
通过“覆盖率”标签页查看已使用和未使用的 CSS
“覆盖率”标签页会显示网页实际使用的 CSS。
- 在开发者工具处于聚焦状态时,按 Command+Shift+P (Mac) 或 Ctrl+Shift+P(Windows、Linux、ChromeOS)可打开命令菜单。
开始输入
coverage
。选择显示覆盖率。系统会显示“覆盖率”标签页。
点击 重新加载。 页面会重新加载,覆盖率标签页会简要显示浏览器加载的每个文件使用的 CSS(和 JavaScript)数量。
绿色表示所使用的 CSS。红色表示未使用的 CSS。
点击某个 CSS 文件,即可在上面的预览中查看它使用的 CSS 的逐行明细。
在屏幕截图中,未使用
devsite-google-blue.css
的第 55 到 57 行以及第 65 到 67 行,而使用了第 59 到 63 行。
强制使用打印预览模式
请参阅强制开发者工具进入打印预览模式。
复制 CSS
通过“Styles”标签页中的单个下拉菜单,您可以复制 CSS 规则、声明、属性、值
此外,您还可以使用 JavaScript 语法复制 CSS 属性。如果您使用的是 CSS-in-JS 库,此选项非常方便。
若要复制 CSS,请执行以下操作:
- 选择一个元素。
- 在元素 > 样式标签页中,右键点击相应 CSS 属性。
从下拉菜单中选择下列选项之一:
- 复制声明。复制属性及其值(采用 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 更改。在所有声明中复制您在 Styles 标签页中所做的更改。
查看计算值。您会进入计算出的标签页。
- 复制声明。复制属性及其值(采用 CSS 语法):
更改 CSS
本部分列出了在元素 > 样式中更改 CSS 的所有方法。
此外,您可以:
向元素添加 CSS 声明
由于声明的顺序会影响元素的样式设置方式,因此您可以通过不同的方式添加声明:
您应该使用哪种工作流程?在大多数情况下,您可能需要使用内嵌声明工作流。内联声明比外部声明具有更高的特异性,因此内联工作流程可以确保更改在元素中如您所期望的生效。如需详细了解特异性,请参阅选择器类型。
如果要调试元素的样式,并且需要专门测试在不同位置定义声明时会发生什么情况,请使用其他工作流。
添加内嵌声明
如需添加内嵌声明,请执行以下操作:
- 选择一个元素。
- 在样式标签页中,点击 element.style 部分的括号。光标将获得焦点,让您可以输入文本。
- 输入属性名称,然后按 Enter 键。
为该属性输入有效值,然后按 Enter。在 DOM 树中,您可以看到已添加到元素中的
style
属性。在屏幕截图中,
margin-top
和background-color
属性已应用于所选元素。在 DOM 树中,您可以看到反映在元素的style
属性中的声明。
向样式规则添加声明
如需向现有样式规则添加声明,请执行以下操作:
- 选择一个元素。
- 在样式标签页中,点击要添加声明的样式规则的括号之间。光标将变为焦点,以便您输入文本。
- 输入属性名称,然后按 Enter 键。
- 为该属性输入有效值,然后按 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 + 向上键能够以 10 为增量递增。
- Shift + Command + Up (Mac) 或 Ctrl + Shift + Page Up(Windows、Linux)将值递增 100。
减少也是有效的。只需将前面提到的 Up 的每个实例替换为 Down 即可。
更改长度值
您可以使用指针更改任何具有长度的属性,例如宽度、高度、内边距、外边距或边框。
如需更改长度单位:
- 将鼠标悬停在单元名称上,您会发现它带有下划线。
点击单位名称可从下拉菜单中选择单位。
如需更改长度值,请执行以下操作:
- 将鼠标悬停在单位值上,您会发现指针变为水平双头箭头。
水平拖动以增大或减小值。
若要将值调整 10,请在拖动时按住 Shift。
向元素添加类
要向元素添加类,请执行以下操作:
- 在 DOM 树中选择元素。
- 点击 .cls。
- 在 Add New Class 框中输入课程名称。
- 按 Enter 键。
模拟浅色和深色主题偏好设置,并启用自动深色模式
如需开启/关闭自动深色模式或模拟用户的浅色主题或深色主题偏好设置,请执行以下操作:
- 在元素 > 样式标签页中,点击 切换常见渲染模拟 (Toggle 常用的渲染模拟)。
从下拉列表中选择以下选项之一:
- prefers-color-scheme: light。表示用户更喜欢浅色主题。
- prefers-color-scheme: dark。表示用户更喜欢深色主题。
- 自动深色模式。以深色模式显示网页(即使您并未实现该模式)。此外,还会自动将
prefers-color-scheme
设置为dark
。
此下拉菜单是模拟 CSS 媒体功能 prefers-color-scheme
和呈现标签页中的启用自动深色模式选项的快捷方式。
切换课程
要在元素上启用或停用类,请执行以下操作:
添加样式规则
要添加新的样式规则,请执行以下操作:
- 选择一个元素。
- 点击新建样式规则 。开发者工具会在 element.style 规则下方插入新规则。
在屏幕截图中,开发者工具会在点击新建样式规则后添加 h1.devsite-page-title
样式规则。
选择要添加规则的样式表
添加新的样式规则时,点击并按住新建样式规则 ,以选择要添加样式规则的样式表。
切换声明
如需开启或关闭单个声明,请执行以下操作:
- 选择一个元素。
- 在样式标签页中,将鼠标悬停在定义声明的规则上。每个声明旁边都会显示复选框。
- 勾选或取消选中相应声明旁边的复选框。当您清除声明时,开发者工具会将其划掉,以表明它不再有效。
在屏幕截图中,当前所选元素的 color
属性处于关闭状态。
在动画期间修改 ::view-transition
伪元素
请参阅动画中的相应部分。
如需了解详情,请参阅使用 View Transitions API 实现平滑简单的转场。
使用网格编辑器对齐网格项及其内容
使用颜色选择器更改颜色
使用“角度时钟”更改角度值
角度时钟提供了一个用于更改 CSS 属性值中的 <angle>
的 GUI。
如需打开角度时钟,请执行以下操作:
- 使用角度声明选择一个元素。
在样式标签页中,找到您要更改的
transform
或background
声明。点击角度值旁边的角度预览框。-5deg
和0.25turn
左侧的小时钟是角度预览。点击预览即可打开角度时钟。
点击 Angle Clock 圆圈来更改角度值,或滚动鼠标以将角度值增大 / 减小 1。
您还可以使用更多键盘快捷键来更改角度值。如需了解详情,请参阅“样式”窗格键盘快捷键。
使用阴影编辑器更改方框和文本阴影
Shadow Editor 提供了一个用于更改 text-shadow
和 box-shadow
CSS 声明的 GUI。
如需使用阴影编辑器更改阴影,请执行以下操作:
选择一个包含阴影声明的元素。例如,选择下一个元素。
在 Styles 标签页中,找到
text-shadow
或box-shadow
声明旁边的阴影 图标。点击阴影图标即可打开阴影编辑器。
更改阴影属性:
- 类型(仅适用于
box-shadow
)。选择边衬区或边衬区。 - X 和 Y 偏移量。拖动蓝点或指定值。
- 模糊处理。拖动滑块或指定值。
- 分散(仅适用于
box-shadow
)。拖动滑块或指定值。
- 类型(仅适用于
查看对元素所做的更改。
使用加/减速编辑器修改动画和过渡时间
加/减速编辑器提供了一个用于更改 transition-timing-function
和 animation-timing-function
值的 GUI。
如需打开加/减速编辑器,请执行以下操作:
- 选择一个包含计时函数声明的元素,例如本页中的
<body>
元素。 - 在 Styles 标签页中,找到
transition-timing-function
、animation-timing-function
声明或transition
简写属性旁边的紫色 图标。 - 点击该图标即可打开加/减速编辑器:
使用预设调整时间
要通过点击调整时间,请使用加/减速编辑器中的预设值:
- 在加/减速编辑器中,如需设置关键字值,请点击选择器按钮之一:
- 线性
- 缓入缓出
- 缓入
- 缓出
在预设切换器中,点击 或 按钮,从下列预设中选择一个:
- 线性预设:
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) |
|
淡入 | In、Sine | 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) |
|
淡出 | 呼出,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 更改。
此外,您还可以使用更改标签页跟踪更改。