我可以在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')
}
答案 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;
}
或者你可以在课后添加一个伪类。
.hoverme:hover {
background:blue;
color:white;
}
&#13;
<a href="#" class="hoverme">Hover me!</a>
&#13;
您可以在W3C的CSS Validator页面查看您的CSS是否有效。