我想知道是否有可能给nth-child一个attritube课程

时间:2014-06-09 19:08:28

标签: jquery html css joomla widget

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

我想为每个带有ACTIVE类的li:nth-​​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
等等等等。 (没有活动类已经正常工作)

我有什么方法可以像......李:nth-​​child(1,.active)那样做?

1 个答案:

答案 0 :(得分:4)

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

按层次结构,您可以设置element[attribute].class:pseudo