✨Chrome DevTools 使用指☞北 - 元素面板之CSS基础知识 🔔

在前端开发的旅程中，Chrome DevTools 如同一位得力的伙伴，而其中的元素面板对于处理 CSS（层叠样式表）更是一个不可或缺的利器。Chrome DevTools 的元素面板之 CSS 功能为前端开发者提供了一个强大、便捷且高效的工具，无论是样式的调试、页面布局的优化还是解决 CSS 相关的问题，都能让我们的工作变得更加轻松和准确。

查看元素的 CSS 🌈

• 选择你想要的元素，右键点击检查。打开元素（Elements）面板，可以看到右侧的 Style 窗格。Styles 窗格会列出应用到在 DOM 树 中所选元素的 CSS 规则。

  

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

查看 CSS 文档🎈

• 如需查看包含简短 CSS 说明的提示，请将鼠标悬停在样式标签页中的属性名称上

  

查看选择器特异性🎈

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

  

查看自定义属性的值🎈

• 鼠标悬停在 --custom-property 上，即可以提示查看其 自定义属性 值

  

查看继承的 CSS 属性 🐾

• 滚动 Styles（样式）标签页，并找到名为 Inherited from <element_name> 的部分

  

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

• "覆盖率" 标签页会显示网页实际使用的 CSS

  1. 按 Command + Shift + P (Mac) 或 Ctrl+Shift+P（Windows、Linux、ChromeOS），同时启用开发者工具 打开命令菜单。

  2. 开始输入 coverage。

     

• 选择显示覆盖率。此时会显示“覆盖率”标签页。

  

• 点击 重新加载。 页面会重新加载，覆盖率标签页会显示 CSS（和 JavaScript）的 使用的文件数量。

  

  绿色表示已使用的 CSS。红色表示未使用的 CSS。

• 点击某个 CSS 文件，可在上方预览中查看该文件使用的 CSS 的逐行细分数据。

  

  在屏幕截图中，devsite-google-blue.css 的第 55 到 57 行和第 65 到 67 行未使用，而使用了第 59 到 63 行。

向元素添加 CSS 声明 🌈

• 在 style 窗格的 element.style 中可以为元素添加相应的 CSS 声明

  

向元素添加 CSS 类 🌈

• 点击  .cls。开发者工具会显示一个文本框，您可以在其中向所选元素添加类

  

• 在 Add new class 文本框中输入你想要的类，然后按 Enter 键

  

• Add new class 文本框下方会显示一个复选框，用于开启或关闭该类

  

向类添加伪状态 🌈

• 使用 Styles 窗格可以对某个元素应用 CSS 伪状态。开发者工具支持 :active、:focus、:focus-within、:target、:hover、:visited 或 focus-visible

  

• 在 样式 窗格中，点击  :hov，选中  :hover 复选框。即使您实际上并未将鼠标悬停在元素上，也会出现下划线

  

更改元素的尺寸 🌈

• 如需查看 Box Model，请点击 Styles 窗格上操作栏中的  显示边栏按钮。

  

• 双击 Box Model 中的左侧外边距。该元素目前没有外边距，因此 margin-left 的值为 100

  

了解“Styles”窗格中的 CSS 🌈

匹配和不匹配的选择器 🐾

• Styles 窗格会在常规文本中显示匹配的选择器，以浅色文本显示不匹配的选择器。

  

值无效和声明 🐾

• Styles 窗格会划掉以下内容，并在以下内容旁边显示警告图标：

  • CSS 属性无效或未知时，整个 CSS 声明（属性和值）
  • 在 CSS 属性有效但值无效时，仅呈现属性

  

已替换 🐾

• Styles 窗格会根据级联顺序划掉被其他属性覆盖的属性

  元素上的 width: 300px; 样式属性会替换 .youtube 类上的 width: 100%

  

无效 🐾

• Styles 窗格以浅色文字显示，并在有效但因其他属性而不起作用的属性旁边放置信息图标。

  这些浅属性处于无效状态是由于 CSS 逻辑，而不是级联顺序。

  在此示例中，display: block; 属性会停用用于控制灵活或网格布局的 justify-content 和 align-items。

  

继承和非继承 🐾

• Styles 窗格会根据属性的默认继承关系在 Inherited from <element-name> 部分中列出属性：

  • 默认情况下会以常规文本形式沿用。
  • 默认情况下，非继承内容以浅文字显示。

  

简写 🐾

• 简写（简洁）属性可让您一次设置多个 CSS 属性，并使样式表更具可读性。不过，由于此类属性的简短性质，您可能会错过一个简写（精确）属性，用来替换简写暗含的属性。

  Styles 窗格会将简写属性显示为下拉列表，其中包含所有缩短的属性。

  

不可修改 🐾

• 样式窗格会以斜体文本显示无法修改的属性。例如，无法修改以下来源的 CSS：

  • user agent stylesheet - Chrome 的默认样式表

  

了解“Computed”窗格中的 CSS 🌈

声明和继承 🐾

• Computed 窗格会列出任何以常规字体显示的样式表中声明的属性，包括元素自己的属性和沿用的属性。点击它们旁边的展开图标即可查看其来源。

  

• 如需在 Styles 窗格中查看声明，请将鼠标悬停在展开的属性上，然后点击箭头按钮。

  

• 如需在 Sources 窗格中查看声明，请点击指向源文件的链接

  

• 对于具有多个来源的媒体资源，已计算窗格会先显示级联胜出者。

  

运行时 🐾

• Computed 窗格以浅文本形式列出了运行时计算的属性值

  

非继承和自定义 🐾

• 如需让已计算窗格显示所有属性及其值，请勾选 全部显示。所有房源均包括：

  • 浅色文本中的 非继承属性的初始值
  • 自定义属性 - 在常规文本中带有 -- 前缀。默认情况下，此类属性是继承的

• 如需将这个大型列表分为多个类别，请选中 群组

  

复制 CSS 🌈

1. 选择一个元素。

2. 在 Elements >样式 签页中，右键点击 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 更改。复制您在样式标签页中所做的全部声明。
   • 查看计算值。转到计算型标签页。

搜索重复项 🌈

• 要调查特定属性及其可能的重复项，请在过滤条件文本框中输入该属性名称。您可以在 Styles 和 Computed 窗格中执行此操作

  

打开颜色选择器并更改颜色 🌈

• 使用颜色选择器，只需点击一下即可更改颜色值：

  1. 在元素面板中选择一个元素。

  2. 在 Styles 窗格中，找到要更改的 color 或 *-color 声明。

     在每个 color 或 *-color 值的左侧，都有一个小方形图标，用于预览相应颜色。

  

• 如需检查计算值，请使用 Computed 窗格

  1. 点击颜色旁边的预览方块，打开颜色选择器。

  2. 如需更改颜色，请使用颜色选择器的任何界面元素。

     

颜色选择器元素 🌈

• 下面是对颜色选择器的每个界面元素的说明：

  

1. 阴影。

2. 取色器。

3. 复制到剪贴板。将显示值复制到剪贴板。

4. 显示值。所选颜色空间的参数。

5. 对比度。仅适用于 color 值。这是 color 和 background-color 之间的差值。

6. 调色板。点击正方形，即可将其颜色更改为正方形。

7. 色域边界。此行仅适用于新颜色空间和 color() 函数。它可以生成高清和非高清颜色。您可以通过这条线区分高清和非高清。

8. 彩色圆圈。穿过阴影区域拖动此圆圈可更改显示值。

9. 色调滑块。

10. 不透明度滑块。

11. 显示值切换器。从下拉列表中选择颜色空间。请参阅转换颜色。注意：另外，如要直接打开下拉菜单，请按住 Shift，然后点击颜色值旁边的颜色预览图标。

12. 展开对比度。打开相应部分，您可以修正对比度。

13. 调色板切换器。点击此图标可在以下选项之间切换：

    • Material Design 调色板。
    • 自定义调色板。要手动将当前颜色添加到此调色板，请点击添加。
    • CSS 变量选项面板。列出您网页上的所有自定义 CSS 变量（附加了 --）。
    • 页面颜色调色板。为了生成此调色板，开发者工具会查找样式表中的所有颜色。

选择颜色空间 🌈

如需选择颜色空间，请执行以下操作：

1. 按住 Shift 键点击颜色值旁边的预览图标。系统会打开一个下拉列表。

2. 选择以下颜色空间之一：

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   或某个新聊天室：

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   或者由 color(<color_space> X X X) 函数定义的聊天室

   

修正对比度 🌈

需修复 color 声明的对比度问题，请执行以下操作：

1. 打开 color 值旁边的颜色选择器。

2. 展开 对比度 部分。

3. 请使用符合准则的建议颜色：

   • 点击相应准则旁边的 。
   • 在顶部的阴影预览中，将颜色圆圈拖动到相应线条下方。

   

用拾色器在任何地方采样色彩 🌈

取色器可以对页面中以及屏幕上任意位置的颜色进行采样。

要从屏幕上的任意位置选择颜色，请执行以下操作：

1. 打开颜色选择器，然后执行以下某项操作：

   • 点击 取色器 按钮。
   • 按 C 激活 取色器。若要停用，请按 Esc 键。

2. 启用 取色器 后，将鼠标悬停在目标颜色上，然后点击采样。

   

使用"角时钟"更改角度值 🌈

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

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

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

   

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

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

   

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

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

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

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

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

   

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

   

4. 更改阴影属性：

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

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