获取 Google Chrome 开发工具中选定元素的所有 CSS 规则

Posted 2023-03-07

【中文标题】获取 Google Chrome 开发工具中选定元素的所有 CSS 规则

【英文标题】：Get all CSS rules for selected element in Google Chrome Dev Tools

【发布时间】：2017-10-28 17:04:56

【问题描述】：

在 Google Chrome 开发工具中，您可以右键单击页面 html 中的元素，然后单击复制元素，这会将元素 HTML 复制到剪贴板。

有没有办法复制与 HTML 元素关联的所有 CSS 规则？

【参考方案1】：

将 Chrome 扩展程序 "CSS Used" 添加到您的浏览器。安装后，您会在屏幕右侧获得一个附加选项卡“CSS used”。该扩展程序也可通过github 获得。

您也可以尝试SnappySnippet 作为替代方案。

【讨论】：

资源的名称和简要说明会很有帮助。到目前为止，如果 URL 发生变化，您的回答将变得毫无价值。有了一些基本信息/关键字，它至少是可搜索的。

【参考方案2】：

DOM Explorer 中的样式和计算选项卡显示适用于选定元素的 CSS 规则。选择Inspect element，然后打开Computed 选项卡，您将看到应用于特定元素的所有 CSS 的列表。

您也可以在此链接中查看Export CSS for DOM elements

有关多个浏览器问题的更多信息，请查看LINK。它可能会对你有所帮助。