jquery - 我想知道是否可以给第 nth-child 一个类属性

Question

这是我的问题。我正在使用小部件菜单。

我想为每一个 ACTIVE 类的第 n 个 child 添加不同的 CSS 规则。这是我的代码:

.wk-slideshow-default .nav .active
li:nth-child(1) span:hover {
width:19px;
height:18px;
background:url(/images/1r.png) !important;
overflow:hidden;
}

听起来很简单，对吧？好吧，只有当我删除 li:nth-child(1) 时，这段代码才有效。这是因为 html 是这样工作的:

<ul class="nav">
    <li></li>
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
</ul>

我无法编辑 HTML，因为这是一个 joomla 扩展。

本质上，我想告诉 CSS 的是:

if you are li:nth-child(1) without the active class, change background to 1.jpg
if you are li:nth-child(1) WITH the active class, change background to 1r.jpg
if you are li:nth-child(2) without the active class, change background to 2.jpg
if you are li:nth-child(2) WITH the active class, change background to 2r.jpg

等等等等。 (没有事件类已经工作正常)

有什么办法可以做到吗...li:nth-child(1, .active)？

Answer 1

可以设置li.active:nth-child(1)

通过层级，可以设置element[attribute].class:pseudo