如何为同一类的不同 li 设置不同的背景图像

Question

我目前有一个正在构建的Joomla 3网站，我正在尝试使用模块SP选项卡添加社交图标，以便您可以单击3个不同的选项卡为您提供信息，例如最新新闻，Twitter和同一区域内的其他新闻。

我已经设法将外观从选项卡更改为社交图标图像，但我遇到的问题是我只能更改其中的 2 张图像，而第三张图像是重复使用已经显示的第二张图像。

以下是Firebug的快照（HTML + CSS），因为我的网站目前在我的本地主机上。

.HTML

<div id="sptab121" class="sptab_red">
    <div class="tabs_buttons">
      <div class="tabs_mask">
        <ul class="tabs_container">
          <li class="tab first-tab active></li>
          <li class="tab"></li>
          <li class="tab"></li>
        </ul>
    </div>
</div>

.CSS

#sptab121 .tabs_mask, #sptab121 ul.tabs_container li span {
    height: 105px;
    line-height: 0px;
}
#sptab121 .tabs_mask {
    border-bottom: 1px solid #DDD;
    padding: 100px 0px 5px;
}
#sptab121 .tabs_mask {
    line-height: 0px !important;
}
#sptab121 ul.tabs_container {
    list-style: outside none none;
    margin: 0px !important;
    padding: 0px !important;
}
#sptab121 .first-tab {
    background: transparent url("/images/twitter.png") no-repeat scroll 0% 0% / 50px 55px !important;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}
#sptab121 ul.tabs_container li.tab {
    background: transparent url("/images/local.png") no-repeat scroll 0% 0% / 50px 55px;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}

问题是第 2 和第 3 li使用的类是同一个"制表符"。我已经设法通过为第一个选项卡添加一个类来覆盖第一个类，但我不确定如何为第二个和第三个链接使用不同的图像。

另一个问题是，它不像在 li 类旁边添加"第二个选项卡"那么容易，因为模块是用 JavaScript 编码的，而且我无法找到实现它的代码。

关于我如何改变这一点的任何建议将不胜感激。

Joomla 模块的链接："extensions.joomla.org/extension/sp-tab"

Answer 1

使用伪类

#sptab121 ul.tabs_container li.tab {
    background: transparent no-repeat scroll 0% 0% / 50px 55px;
    float: left;
    line-height: 13px;
    cursor: pointer;
    padding: 55px 0px 0px;
    margin: 0px 23px 0px 0px;
    width: 50px;
    font-weight: bold;
    text-align: center;
}    
#sptab121 ul.tabs_container li.tab:nth-child(2){ 
    background-image: url("https://cdn1.iconfinder.com/data/icons/simple-icons/4096/instagram-4096-black.png") ;
    }
    #sptab121 ul.tabs_container li.tab:nth-child(3){  
    background-image: url("https://cdn3.iconfinder.com/data/icons/picons-social/57/80-google-plus-512.png") ;
    }

演示