：nth-​​child不适用于Wordpress小部件标题

Question

我尝试使用：nth-​​child伪类为每个侧边栏小部件标题赋予标题文本旁边唯一的背景颜色和图标。

目前，它为所有3个侧边栏小部件标题显示背景颜色和背景图像：nth-​​child（1），而不是：Twitter的nth-child（1）：民意调查（2）为投票，而nth-child（3）为Instagram。

.main .sidebar .widgettitle:nth-child(1) {
    background-color: #25abdc !important;
    color: #ffffff; 
    background-image: url('/wp-content/uploads/2014/08/twitter-icon.png');
    background-repeat: no-repeat !important;
    background-position: 15% !important;
}

.main .sidebar .widgettitle:nth-child(2) {
  background-color: #f18484  !important;
  color: #FFFFFF;
  background-image: url('/wp-content/uploads/2014/08/poll-icon.png');
  background-repeat: no-repeat !important;
  background-position: 15% !important;
}

.main .sidebar .widgettitle:nth-child(3) {
  background-color: #25abdc  !important;
  color: #ffffff !important; 
  background-image: url('/wp-content/uploads/2014/08/instagram-icon.png') ;
  background-repeat: no-repeat !important;
  background-position: 15% !important;
}

网址为http://1musicnetworks.kingly.co.za/。

Answer 1

抱歉，我的不好。是的，我不太关注标记。

但是看一下标记，这是你可以做的事情 - 而不是定位.widgettitle，你可以像这样定位li：

.main .sidebar li:nth-child(3) .widgettitle {
    background-color: red !important;
    color: #FFFFFF;
}

（跛脚）Fiddle

注意：我刚用red来突出显示效果。您可以随意更换颜色和款式。