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

Question

在Chrome 开发者工具中检查元素并编辑应用于该元素的现有 CSS 规则非常简单，但是如果您想创建全新的样式规则怎么办？

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

br {显示：无} hr {页边距：20px} 字体 {font-size：18px}

敏捷宣言背后的原则，以便我可以直接从浏览器将其打印在一张 A4 纸上。

我已经链接到的有关 Chrome 开发人员工具的官方文档确实有一个关于添加新规则和属性的部分，但它已经过时，并且无法像最新版本的 Chrome 中那样工作。

Answer 1

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

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