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

时间:2017-07-23 12:03:30

标签: css sass css-selectors pseudo-class

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

2 个答案:

答案 0 :(得分:3)

没有&#34;伪选择器&#34;。

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

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

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

答案 1 :(得分:0)

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

此css有效且有效:

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

这也有效:

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

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

&#13;
&#13;
.hoverme:hover {
  background:blue;
  color:white;
}
&#13;
<a href="#" class="hoverme">Hover me!</a>
&#13;
&#13;
&#13;

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