在 Chrome 开发者工具中添加新的 CSS 规则，而不是通过检查元素？答案

【问题标题】：Add a new CSS rule in Chrome Developer Tools, not via inspecting an element?在 Chrome 开发者工具中添加新的 CSS 规则，而不是通过检查元素？
【发布时间】：2014-03-02 12:27:54
【问题描述】：

我想直接在 Chrome 开发者工具中添加一个新的样式规则，但我很难做到这一点，请按照https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit 的指南进行操作

这是我要添加的 CSS 规则 - 我无法通过选择元素来设置选择器，我需要直接键入它。我想这样做以确保 CSS 语法本身是正确的。

.y-axis .tick:nth-child(2):nth-last-child(1) text {
  font-weight: bold;
}

我点击了“加号”来添加规则，但是当我这样做时，我发现开发人员工具不允许我通过键入或粘贴来添加它 - 它要么变灰，要么或者它像这样粘贴，括号错误：

然后，当我按 Enter 键或制表符退出，或尝试编辑规则时，文本就消失了。非常令人沮丧。

如何在无法通过检查元素设置的开发人员工具中添加新的 CSS 规则？

抱歉，如果这是此问题的错误论坛。

【问题讨论】：

当您添加 + 时，请先在规则选择器中键入/粘贴，而不是在整个规则中。选择器添加后，才可以输入font-weight等。
相当肯定选择器无论如何都不会工作，因为它有多个伪类，后面跟着不是 HTML 元素的东西（文本）。
这是一个 SVG 元素 - 它在这里工作得很好：jsfiddle.net/uh29j/1

标签： css google-chrome-devtools

【解决方案1】：

为了不让它变灰，您需要选择一个应用规则的元素。

您没有显示您的代码，但该规则仅适用于 .tick 的第二个孩子，它也是最后一个孩子。如果您单击以创建该规则的元素不符合这些选择器，它将变为灰色，并低于该元素本身的其他规则。

当前版本的 Chrome 不会移动或隐藏它，直到您选择另一个元素，所以这可能是一个老问题，但对于遇到类似问题的其他人来说：“规则必须应用于所选元素”。但是由于在添加 content:"" 之前无法触摸伪元素，因此您必须创建规则，为其添加 content 属性，然后触摸伪元素，然后它就不会变暗了。

同样，当前的 Chrome 允许您在变暗时对其进行编辑。

【讨论】：

【解决方案2】：

首先，选择一些元素并添加一个新的 CSS 规则，如 Chrome documentation 中所述：

单击位于样式编辑器右上角的新样式规则 图标。出现一个带有自动建议选择器的新规则。

然后，点击新添加的规则框右上角的inspector-stylesheet:1链接，并在开发者工具的Sources选项卡中编辑规则。

【讨论】：