在Chrome 开发人员工具中检查元素并编辑应用于该元素的现有 CSS 规则很容易，但是如果您想创建一个全新的样式规则怎么办？
就我而言，我想做的是应用以下样式规则：
br {display: none} hr {margin-top: 20px} font {font-size: 18px}
致敏捷宣言背后的原则，以便我可以直接从浏览器将其打印在一张 A4 纸上。
我已经链接到的关于 Chrome 开发人员工具的官方文档确实有一个关于添加新规则和属性的部分，但是它已经过时并且在最新版本的 Chrome 中不能像这样工作。
Styles“新样式规则”窗格中现在有一个专用按钮。它看起来像一个加号（+）：
这将创建一个新的样式块，允许您自己定义选择器：
尝试使用CSS Brush，一个 chrome 插件来实时创建 CSS。您可以从页面创建选择器。您可以拥有完整的 CSS 路径或对其进行过滤以制作更短的路径。在实时编辑 CSS 属性时，上下文相关菜单非常有用。您甚至可以打开/关闭属性或选择器。
这对于即时进行少量修改很方便，但是对于需要额外花括号的 CSS3 媒体查询或粘贴整个 CSS 部分进行测试时效果不佳。
解决方案是首先单击+按钮添加新样式，然后按 Enter（或单击相邻的空格）。
这将显示一个名为inspector-stylesheet:1的检查器样式表的链接
如果单击该链接，它会打开一个完整的实时样式表，您可以在其中编写复杂的规则，也可以将整个外部样式表粘贴到其中进行测试。