css - 社交图标的 Wordpress 菜单

Question

我正在尝试使用 wordpress 自定义菜单来允许用户轻松链接他们的社交媒体网站。到目前为止，我在我的 functions.php 主题文件中设置了一个 wordpress 菜单“社交图标”，并使用自定义菜单小部件将其放置在网站上。这是为菜单和小部件生成的 html wordpress

<div class="menu-social-icons-container">
<ul id="menu-social-icons" class="menu">
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://facebook">Facebook</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="http://twitter">Twitter</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://instagram">Instagram</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-77"><a href="http://youtube">Youtube</a></li>
</ul>
</div> 

我假设 id“menu-social-icons”是由于我创建的主题位置或菜单名称，所​​以如果 id 是基于它我可以使用此方法允许用户链接他们的社交媒体图标。对于使用此主题的任何用户，id“menu-social-icons”是否相同，或者它是生成的 id，如 li.xml 中的“menu-item-73”。

如果相同，我正在尝试将第 n 个子元素设置为图标背景的样式，但我对在 css 中使用哪些选择器感到困惑，因为例如，如果我使用

ul#menu-social-icons li a:link:nth-child(1){
background-img:url(images/facebook.png);
}

ul#menu-social-icons li a:link:nth-child(2){
background-img:url(images/twitter.png);
}

等

我什么都没有

我需要使用哪些选择器来实现这一目标？

Answer 1

考虑这个例子http://jsfiddle.net/jogesh_pi/d85Ae/

<ul>
   <li><a href="#link1">link1</a></li>
   <li><a href="link2">link2</a></li>
   <li><a href="link3">link3</a></li>
   <li><a href="link4">link4</a></li>
</ul>

CSS

ul li:nth-child(1) a{ color: #ff0000; }
ul li:nth-child(2) a{ color: green; }
ul li:nth-child(3) a{ color: #ff9900; }

注意:确定要在菜单上实现的图像路径