css - 在css中的伪选择器之后添加类选择器

Question

我可以在我的 CSS 规则中的伪类之后添加类选择器吗，例如:

a:hover.my-class {
    background: red;
}

因此，如果我将鼠标悬停在 anchor 标记上，<a class="my-class">link</a> , 背景在所有浏览器中都是红色的吗？这是有效的 CSS 吗？

---

为什么我需要这个

我有这个问题，因为它是从 SASS 中的混​​合生成的:

@mixin focus($classA, $classB) {
  &:focus {
    &#{$classA} {
      background: blue;
    }

    &#{$classB} {
      background: yellow;
    }
  }
}

a {
  @include focus('.class-a', '.class-b')
}

Answer 1

没有所谓的“伪选择器”。

以“pseudo-”开头的选择器有两种特性:伪类和伪元素。它们是具有不同语法规则的完全不同的功能。

您可以将类选择器放在伪类之后，例如:hover，因为它们都是简单选择器，而且简单选择器在复合选择器中的顺序不重要(类型和通用选择器是此规则的唯一异常(exception) - 它们始终必须排在第一位，例如您示例中的 a)。

您不能将类选择器放在伪元素之后，例如::before，因为伪元素不是简单的选择器。您的问题可能与伪元素无关，但由于术语“伪选择器”的普遍使用，必须做出这种区分，该术语错误地将两个特征分组为一个总称(坦率地说，这使问题比它真的需要)。