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

Question

I want to add a new style rule directly in the Chrome developer tools, but I'm struggling to do so, from following the guide at https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit

This is the CSS rule I want to add - I can't set up the selector by selecting an element, I need to type it it directly. I want to do this to make sure that the CSS syntax itself is correct.

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

I have clicked on the "plus" sign to add the rule, but when I do, I'm finding that the developer tools just won't let me add it by typing or pasting it in - it either goes gray, or it pastes in like this, with the brackets wrong:

Then when I press Enter or tab out, or try to edit the rule, the text just vanishes. Very frustrating.

How can I add new CSS rules in the developer tools that aren't amenable to being set up via inspecting an element?

Apologies if this is the wrong forum for this question.

Answer 1

For it not to go gray, you need to select an element to which the rules DOES apply.

You are not showing your code, but that rule will only apply to a second child of .tick which is ALSO the last child. If the element you clicked to create that rule does NOT meet those selectors, it will go gray, and BELOW the other rules for the element itself.

Current versions of Chrome will won't move it or hide it until you select another element, so this is probably an old issue, but for others experiencing similar issues: "The rule must apply to the selected element". But since you can't touch the pseudo element until you add content:"" to it, you'll have to create the rule, add content property to it, then touch the pseudo element, and then it will not be dimmed anymore.

Again, current Chrome allows you edit it even when dimmed.

Answer 2

First, select some element and add a new CSS rule as described in the Chrome documentation :

Click the New Style Rule icon located in the upper-right corner of the styles editor. A new rule with an automatically suggested selector appears.

Then, click the inspector-stylesheet:1 link in the top-right corner of the newly added rule box and edit the rule in the Sources tab of the Developer Tools.