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

Question

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

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

因此，如果我将鼠标悬停在锚标记上，

<a class="my-class">link</a>

，所有浏览器中的背景都会是红色吗？这是有效的 CSS 吗？

---

为什么我需要这个

我有这个问题，因为它是从 SASS 中的 mixin 生成的：

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

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

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

Answer 1

不存在“伪选择器”这样的东西。

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

您可以将类选择器放置在伪类之后，例如

:hover

，因为它们都是简单选择器，并且复合选择器中简单选择器的顺序并不重要（类型和通用选择器是此规则的唯一例外） — 它们总是必须排在第一位，例如您示例中的

a

）。

您不能将类选择器放置在伪元素（例如

::before

）之后，因为伪元素不是简单的选择器。您的问题可能不是关于伪元素，但必须做出这种区分，因为术语“伪选择器”的常见使用，它错误地将这两个功能分组为一个总括术语（坦率地说，使问题比它真的需要）。

Answer 2

是的，您可以将类添加到伪类中。

这个CSS是有效的并且可以工作：

a:hover.hoverme {
  background:blue;
  color:white;
}

这也有效：

a.hoverme:hover {
  background:blue;
  color:white;
}

或者你可以在类后面添加一个伪类。

.hoverme:hover {
  background:blue;
  color:white;
}

<a href="#" class="hoverme">Hover me!</a>

您可以在 W3C 的 CSS Validator 页面检查您的 CSS 是否有效。