在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

首先，选择一些元素并按照Chrome documentation中的描述添加新的CSS规则：

  

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

然后，单击新添加的规则框右上角的inspector-stylesheet:1链接，并在开发人员工具的“源”标签中编辑规则。