：nnth-child不能用于Wordpress小部件标题

-1

我试图使用：nth-child伪类为标题文本旁边的每个侧栏小部件标题提供独特的背景颜色和图标。：nnth-child不能用于Wordpress小部件标题

此刻，它显示所有3个侧边栏小部件标题的第n个子项（1）的背景颜色和背景图像，而不是：第n个子项（1）代表Twitter，第n个子项（2）投票和：第n孩子（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; 
}

该URL是http://1musicnetworks.kingly.co.za/。

来源

2014-08-28 Rob Watt

因为它是'nth-child'而不是'nth-class'。 CSS伪类，如'：nth-child'，'：nth-of-type'，...匹配父级的子树中的元素的第n个子元素*或*类型。他们不查看类的列表。 – 2014-08-28 20:10:28

[CSS选择器的第一个元素与类]（http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class） – 2014-08-28 20:12:18

请阅读[如何创建一个最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。在这种情况下，除了发布所有相关的代码之外，还可以添加一个演示问题的小提琴。。。。哦，是的，在问之前研究这个网站是必不可少的。祝你好运！ – brasofilo 2014-08-28 20:13:09

对不起我的坏。是的，我不太关注标记。

但看标记，这里的东西你可以做的 - 而不是靶向.widgettitle，您可以针对li这样的：

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

（跛脚）Fiddle

注：我只是用red突出显示效果。随意用您的颜色和样式替换它。

来源

2014-08-28 20:13:41 Mrchief

我很肯定你没有检查提供的链接的标记 – 2014-08-28 20:16:04

是的，在每种情况下都是孤立的'h3'。 'nth-type-type'在这里不起作用。 – 2014-08-28 20:17:08

是的，我曾尝试过以前的类型无济于事。 – 2014-08-28 20:27:28

：nnth-child不能用于Wordpress小部件标题

回答

相关问题