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

【问题标题】：How can I set different background images for different li with same class如何为同一类的不同li设置不同的背景图像
【发布时间】：2019-06-07 15:28:28
【问题描述】：

我目前正在构建一个 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”

【问题讨论】：

标签： javascript html css joomla css-selectors

【解决方案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

【讨论】：