Question

我尝试使用wordpress自定义菜单，以便用户轻松链接其社交媒体网站。到目前为止，我设置了一个wordpress菜单＆＃34;社交图标＆＃34;在我的functions.php主题文件中，我使用自定义菜单小部件将其放在网站上。这是为菜单和小部件生成的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＆＃34; menu-social-icons＆＃34;是由于我创建的主题位置或菜单名称，所以如果id是基于我可以使用此方法允许用户链接他们的社交媒体图标。 id＆＃34; menu-social-icons＆＃34;对于使用此主题的任何用户来说都是相同的，或者它是一个生成的ID，如＆＃34; menu-item-73＆＃34;在李。

如果它是相同的，我试图将第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);
}

ECT

我没有得到任何东西

我需要使用哪些选择器来实现此功能？

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; }

注意：确保您要在菜单上实施的图片路径

社交图标的Wordpress菜单

1 个答案: