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

没有＆＃34;伪选择器＆＃34;。

选择器中有两个以＆＃34;伪 - ＆＃34;：伪类和伪元素开头的特征。它们是完全不同的功能，具有不同的语法规则。

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

你不能在::before之类的伪元素之后放置一个类选择器，因为伪元素不是一个简单的选择器。你的问题可能不是关于伪元素的，但必须进行这种区分，因为术语＆＃34;伪选择器＆＃34;的常见用法，它错误地将两个特征组合成一个单独的术语（并且坦率地说这个问题比真正需要的更复杂。

Answer 2

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

此css有效且有效：

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

这也有效：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: