规则选择器的一部分是黄色的

Question

Screenshot

当我尝试在自定义中直接使用选择器时 CSS

a:hover, a:focus, a:active !important {
    color: #fff;
}

它不起作用，而前一段时间它起作用（当它不是黄色时）。

有效：

a {
    color: #fff;
}

但是黄色突出显示的确切含义是什么，为什么第一个版本不起作用？

p.s。使用 Dev Tools 的哪个原则应该将我带到 a 版本（通过尝试找到它）？

Answer 1

黄色表示 pseudo-class 匹配，例如您的 :hover。

此突出显示与您选择器不匹配的问题无关。

选择器不匹配的原因是您在其中放置了 !important 声明。虽然 !important 在选择器中是 only allowed for individual style declarations，但不是。

Using !important in a selector makes the whole selector invalid.

所以您的情况下正确的选择器是 a:hover, a:focus, a:active。

Firefox DevTools 提供的关于不正确的 CSS 选择器（从 Firefox 77 开始）的 explizit 提示是在 Console 中警告说 "Dangling combinator. Ruleset ignored due to bad selector" 当你启用 CSS 过滤器：

您得到的另一个指示是 CSS 具有无效选择器的规则不会显示在规则面板中。

根据 bug 1171873.

中的要求，高级帮助可能会在 样式编辑器 中显示 CSS 错误和警告

规则选择器的一部分是黄色的

A part of a Rule Selector is yellow

firefox

developer-tools

firefox-developer-tools