javascript - 在样式表中指定多 css 类

Question

美好的一天。

我有一个元素分配有两个三个类。两种在 html 中分配，一种由 jQuery 作为事件类分配。

现在我想在 CSS 中指定悬停效果，但针对一个特定元素:“menuItem first”类...

HTML:

<ul>     
  <li class="menuItem first"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
</ul>

CSS:

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg2.png) no-repeat;
}

li.act .first, li.act .first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

我知道上面的CSS是错误的。正确的注释是什么？
请记住，.act 类由 jQuery 分配给事件元素...

Answer 1

当你说

li.act .first

你真正想说的是“类 first 的元素位于类 <li> 类 act 的元素中”。

如果您想说“同时具有 first 和 act 类的元素，您需要将它们写出而不带空格:

li.act.first

接下来，要实现所述选择器的悬停规则集，您只需附加伪 :hover 即可。一如既往:

li.act.first:hover