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

Question

我想直接在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或Tab键，或尝试编辑规则时，文本就会消失。 很沮丧。

如何在开发人员工具中添加新的CSS规则，这些规则不适合通过检查元素进行设置？

如果这是这个问题的错误论坛，请道歉。

Answer 1

为了不变灰，您需要选择规则适用的元素。

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

当前版本的Chrome将不会移动它或隐藏它，直到您选择另一个元素，因此这可能是一个老问题，但对于遇到类似问题的其他人：“规则必须适用于所选元素”。 但是，因为在添加内容之前你不能触摸伪元素：“”它，你必须创建规则，向它添加内容属性，然后触摸伪元素，然后它将不再变暗。

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

Answer 2

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

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

然后，单击新添加的规则框右上角的inspector-stylesheet:1链接，并在Developer Tools的Sources选项卡中编辑规则。