CSS 功能参考 - Microsoft Edge Development

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

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

如果样式表已缩小，请单击 “编辑器 ”窗格底部的“ 格式 ( ) ”按钮。有关详细信息，请参阅使用 pretty-print 重新格式化缩小的 JavaScript 文件。

在下图中，单击 https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 后，将前往的第 https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css 2 行，其中 .content h1:first-of-type 定义了 CSS 规则。

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

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

选择元素。

转到 “元素” 工具中的“ 计算 ”面板。

在较宽的 DevTools 窗口中， “计算 ”面板不存在。 “计算 ”面板的内容显示在 “样式” 面板上。

继承的属性是不透明的。

若要显示所有继承的值，请选中“ 全部显示 ”复选框。

在下图中， “计算 ”面板显示了要应用于当前所选 h1 元素的 CSS 属性：

若要查看元素的框模型，请转到 “样式” 面板。如果 DevTools 窗口较窄， 则框模型 关系图位于面板底部。

若要更改值，请双击它。

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

搜索和筛选元素的 CSS

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

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

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

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

切换伪类，例如 :active 、 :focus 、 :hover 或 :visited ：

选择元素。

在 “元素” 工具上，转到“ 样式 ”选项卡。

单击 “：hov ”。

选择要启用的伪类。

下图显示了切换 :hover 伪类。在视区中 background-color: cornflowerblue ，声明将应用于元素，即使元素实际上未悬停在上。

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

在打印模式下查看页面

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

打开命令菜单。

开始键入 rendering ，然后选择“ 显示呈现 ”。

单击“ 模拟 CSS 媒体 ”下拉列表，然后选择“ 打印 ”。

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

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

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

开始键入 coverage ，然后选择“ 显示覆盖范围 ”。 “ 覆盖” 工具随即出现。

从命令菜单打开“覆盖”选项卡：

“覆盖范围”选项卡：

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

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

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

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

向元素添加内联 CSS 声明

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

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

添加内联声明：

选择元素。

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

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

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

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

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

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

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

选择元素。

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

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

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

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

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

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

单击并按住 “新建样式规则 ” (

”) 然后从列表中选择样式表以向其添加样式规则。

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

默认情况下，通过单击“新建样式规则”添加 样式规则 会将新规则插入样式表中 的 element.style 规则 inspector-stylesheet 下方。

改为在“ 样式” 面板的特定位置添加样式规则：

将鼠标悬停在要添加新样式规则的正上方的样式规则上。

单击“ 在下方插入样式规则 ” (“ ) 。

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

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

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

选择元素。

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

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

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

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

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

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

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

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

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

此页面的部分内容是基于 Google 创建和共享的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。原始页面在此处找到，由凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品在 Creative Commons 署名 4.0 国际许可下获得许可。