使用Chrome的开发人员工具使用新的全局CSS规则实时编辑页面

Question

在Chrome Developer Tools中检查元素和edit an existing CSS rule applying to that element很容易，但是如果要创建一个全新的样式规则会怎样？

就我而言，我想要做的是应用以下样式规则：

br {display：none}    hr {margin-top：20px}    font {font-size：18px}

到Principles behind the Agile Manifesto，以便我可以直接从浏览器将其打印在一张A4纸上。

我已经链接过的关于Chrome开发者工具的官方文档确实有一个关于Adding New Rules and Properties的部分，但它已经过时，并且不像最新版本的Chrome那样有效。

Answer 1

现在Styles窗格中有一个专用按钮用于“新风格规则”。它看起来像加号（+）：

这将创建一个新的样式块，允许您自己定义选择器：

Answer 2

这对于动态上的小修改很方便，但是对于需要额外大括号的CSS3媒体查询或者用于粘贴CSS的整个部分来测试它时效果不佳。

解决方法是首先点击 + 按钮添加新样式，然后按Enter（或点击相邻的空格）。

现在将显示一个名为 inspector-stylesheet的检查器样式表的链接：1

如果单击该链接，它将打开一个完整的实时样式表，您可以编写复杂的规则，并将整个外部样式表粘贴到测试中。

Answer 3

尝试使用Chrome插件CSS Brush创建CSS live。您可以从页面创建选择器。您可以拥有完整的CSS路径或对其进行过滤以缩短路径。在实时编辑CSS属性时，上下文相关菜单非常有用。您甚至可以打开/关闭属性或选择器。