A part of a Rule Selector is yellow
When i try to use the selector directly in custom CSS
a:hover, a:focus, a:active !important {
color: #fff;
}
It doesn't work, while some time ago it did (when it wasn't yellow) .
That works:
a {
color: #fff;
}
But what the yellow highlight means exactly, and why the first version doesn't work ?
p.s. And which principle of using the Dev Tools should've bring me to the a version (found it by trying) ?
The yellow color indicates that a pseudo-class is matching, like :hover in your case.
This highlighting is independent from your issue that the selector doesn't match.
The reason why the selector doesn't match is that you placed an !important declaration in there. Though !important is only allowed for individual style declarations, not in selectors.
Using !important in a selector makes the whole selector invalid.
So the correct selector in your case is a:hover, a:focus, a:active.
An explizit hint the Firefox DevTools provide regarding incorrect CSS selectors (as of Firefox 77) is a warning saying "Dangling combinator. Ruleset ignored due to bad selector" within the Console when you have the CSS filter enabled:
Another indication you get is that CSS rules with invalid selectors don't show up in the Rules panel.
An advanced help could be showing CSS errors and warnings within the Style Editor as requested in bug 1171873.