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

【问题标题】：Adding class selector after pseudo selector in css在css中的伪选择器之后添加类选择器
【发布时间】：2017-12-29 02:40:24
【问题描述】：

我可以在我的 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')
}

【问题讨论】：

标签： css sass css-selectors pseudo-class

【解决方案1】：

是的，你可以将一个类添加到一个伪类中。

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

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

这也有效：

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

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

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

&lt;a href="#" class="hoverme"&gt;Hover me!&lt;/a&gt;

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

【讨论】：

【解决方案2】：

没有“伪选择器”之类的东西。

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

您可以在:hover 等伪类之后放置类选择器，因为它们都是简单选择器，复合选择器中简单选择器的顺序无关紧要（类型和通用选择器是这条规则的唯一例外——它们总是必须先出现，例如您示例中的a。

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

【讨论】：