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

Question

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

我已经设法将选项卡的外观更改为社交图标图像，但我遇到的问题是我只能更改其中的 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;
}

问题是第二个和第三个 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") ;
    }

Demo