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

Question

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

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

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

此 css 有效且有效：

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

这也有效：

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

或者您可以在 class 之后添加伪 class。

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

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

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

Answer 2

没有"pseudo-selector"这样的东西。

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

你可以在伪class之后放置一个class选择器，例如:hover，因为它们都是简单的选择器和顺序复合选择器中简单选择器的数量无关紧要（类型和通用选择器是此规则的唯一例外 - 它们始终必须排在第一位，例如您示例中的 a）。

您不能将class选择器放在::before等伪元素之后，因为伪元素不是简单的选择器。您的问题可能与伪元素无关，但由于术语 "pseudo-selector" 的普遍使用，必须做出这种区分，它错误地将两个特征分组为一个总称（坦率地说，这使问题比确实需要）。

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

Adding class selector after pseudo selector in css

css

sass

css-selectors

pseudo-class