:nth-child 不适用于 Wordpress 小部件标题答案

【问题标题】：:nth-child not working for Wordpress widget titles:nth-child 不适用于 Wordpress 小部件标题
【发布时间】：2014-10-22 19:22:46
【问题描述】：

我正在尝试使用 :nth-child 伪类为每个侧边栏小部件标题提供唯一的背景颜色和标题文本旁边的图标。

目前，它为所有 3 个侧边栏小部件标题显示 :nth-child(1) 的背景颜色和背景图像，而不是 Twitter 的 :nth-child(1) :nth-child( 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/。

【问题讨论】：

因为它是nth-child 而不是nth-of-class。 CSS 伪类（例如 :nth-child、:nth-of-type、...）匹配父级子树中的第 n 个 child 或 元素类型。他们不会查看类列表。
CSS selector for first element with class的可能重复
请阅读How to create a Minimal, Complete, and Verifiable example。在这种情况下，除了发布所有相关代码之外，还要添加一个演示问题的小提琴。 . . .哦，是的，在询问之前研究这个网站是必不可少的。祝你好运！
nth-child 和 nth-of-type 都适用于具有相同父级的元素并且仅适用于元素......而不是类。
@HashemQolami - 我尝试了 :nth-of-class，但没有奏效，并从所有样式中删除了样式。

标签： css wordpress widget css-selectors

【解决方案1】：

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

但是查看标记，您可以执行以下操作 - 您可以像这样定位 li，而不是定位 .widgettitle：

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

（跛脚）Fiddle

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

【讨论】：

我很确定您没有检查所提供链接的标记
是的，在每种情况下都是一个单独的h3。 nth-of-type 在这里不起作用。
是的，我之前尝试过 nth-of-type 无济于事。
@Mrchief - 非常感谢 :) 完成了 95%。我给了他们每个人 2 的间隔，这很有效。即 FIRST CHILD = ".main .sidebar li:nth-child(1) .widgettitle"。第二个孩子 = “.main .sidebar li:nth-child(3) .widgettitle”。第三个孩子 = ".main .sidebar li:nth-child(5) .widgettitle"