Css ：n不适用于Wordpress小部件标题的子项

我试图使用：nth child伪类为每个边栏小部件标题提供一个唯一的背景颜色和图标以及标题文本

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

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

---

网址是。

对不起，我的错。是的，我不太注意标记

但是看一下标记，您可以做一些事情，而不是针对

.widgettitle

，您可以像这样针对

li

：

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

（跛脚）

---

注意：我刚才用了

red

来突出显示效果。您可以随意用您的颜色和样式替换它

因为它是

n个子类

而不是

n个类

。CSS伪类，例如

：n个子类

，

：n个类型

，。。。匹配父元素的子元素树中元素的第n个子元素或类型。他们没有查看课程列表。可能重复的请阅读。在这种情况下，除了发布所有相关代码外，还要添加一个小提琴来演示问题。哦，是的，在询问之前研究这个网站是必要的。祝你好运<代码>第n个子元素和

第n个类型

都对具有相同父元素的元素起作用，并且只对元素起作用……而不是类。@HashemQolami-我尝试了：第n个类，但没有起作用，并且从所有类中删除了样式。我很确定您没有检查所提供链接的标记是的，在每种情况下都是单独的

h3

<代码>第n种类型在这里不起作用。是的，我以前试过第n种类型，但没有用。@chief先生-非常感谢：）这是95%。我给他们每人2次间隔，这很有效。i、 e.FIRST CHILD=“.main.sidebar li:n个孩子（1.widgettille）”。SECOND CHILD=“.main.sidebar li:n个CHILD（3.widgettille）”。第三个孩子=“.main.sidebar li:n个孩子（5.widgettitle）”