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

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

请参阅@Sotiris 的回答。

从来没听说过。

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

Answer 4

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

注意块：

element.style {

}

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

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

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