在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

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

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

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

Answer 2

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

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

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

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