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

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 代码来为每个元素添加唯一的 class，您可以使用 :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 .

希望对你有帮助