你可以在 Chrome Inspector 中添加新的 CSS 属性吗？

Question

是否可以在 Chrome 检查器中添加新的 CSS 属性？您似乎只能编辑现有属性。

另外，一旦你编辑了属性，有没有办法将修改后的 CSS 作为一个整体来查看？

Answer 1

为什么不呢？这是 Google Chrome 检查器Styles 面板的屏幕截图

注意块：

element.style {

}

您只需在该区域单击鼠标，检查器将为您提供添加新样式的机会。如果您需要为元素添加新属性，请在Elements 面板中右键单击它并选择“添加属性”。

另外，一旦你编辑了属性，有没有办法将修改后的 CSS 作为一个整体来查看？

Computed Style 面板没有给你这个信息吗？在那里，您可以检查应用于节点的所有样式，实际上，可以检查它们应用的规则和样式表。

Answer 2

是否可以在 Chrome 检查器中添加新的 CSS 属性？它 看来您只能编辑现有属性...

只需双击“样式”面板中的任何空白区域。

我倾向于双击 } 右侧的任何我想要编辑的 CSS 规则。

另外，一旦你编辑了属性，有没有办法查看修改后的 整个 CSS？

见@Sotiris's answer。

我不知道。

可能有一个扩展可以做到这一点，但如果存在，它可能不会保留原始 CSS 的确切格式。

Answer 3

您可以在规则内双击添加新属性。您也可以从角落的轮子中添加新规则，然后选择“新样式规则”。

要查看整个修改后的文档，请访问：Resources > Frame > site name > Stylesheets > stylesheet-name.css

或者直接点击css属性上方的+号

Answer 4

是的，可以在 Chrome 检查器中添加新的 CSS 属性并通过几个简单的步骤对其进行查看：

1. 右键单击要更改的元素并选择“检查元素”；
2. 点击“新建样式规则”按钮（下图中的1）；
3. Google Chrome 会分配一个 CSS 匹配规则，您可以重命名（下图中的 2 个）；
4. 添加您的 CSS 规则（下图中的 2 个）；
5. 完成后，只需检查“Computed Style”窗格（下图中的 3）。