Question

我遇到了列表问题，不确定如何攻击它。

代码如下

<ul>
    <li class="even even typeTextfield group2">
    <span class="itemExtraFieldsLabel">Phone:</span>
    <span class="itemExtraFieldsValue">12345678</span>
    </li>
    <li class="odd type link group2">
    <span class="itemExtraFieldsLabel">Facebook:</span>
    <span class="itemExtraFieldsValue"><a href="http://www.facebook.com target="_blank">Facebook</a>
    </li>
</ul>

我想基本上将itemExtraFieldsLabel类旁边的Phone和Facebook替换为图像。我知道我可以用CSS和Javascript做些什么，但似乎无法让它发挥作用。

代码是由插件生成的，而网站是使用Joomla构建的，如果这有任何区别的话。

对于学习者的任何帮助和指导将不胜感激。

由于

Answer 1

您可以使用 background-image 属性将背景设置为 span 项。

如果您无法更改 html 代码以为每个元素添加唯一类，则可以使用 :nth-child() 按照它的顺序定位每个元素。

所以你最后的css将是：

ul .group2:nth-child(1) .itemExtraFieldsLabel {
  background-image: url('phone.png');
}
ul .group2:nth-child(2) .itemExtraFieldsLabel {
  background-image: url('facebook.png');
}

对于文本隐藏，有许多解决方案。您可以使用font-size:0px，text-indent: -9999px;或something else that would fit your needs。

希望这有帮助

根据列表值设置无序列表的样式

1 个答案: