使用 nth-child 在 WordPress 循环中创建交替的背景颜色答案

【问题标题】：Using nth-child to create alternating background colors in WordPress loop使用 nth-child 在 WordPress 循环中创建交替的背景颜色
【发布时间】：2014-08-12 04:02:10
【问题描述】：

我有一个 WordPress 循环，其中包含三种帖子类型（食谱、活动、帖子）。我的目标是将 #e4dfce 的背景颜色分配给循环中的所有其他帖子到以下类：.lb-wrapper

我目前使用以下代码完全按照我想要的方式工作，但我想使用 nth-child 而不是 nth-of-type。

.recipe:nth-of-type(odd), .event:nth-of-type(odd), .post:nth-of-type(odd) .lb-wrapper { background-color: #e4dfce; }

我试过了，但它不起作用：

.lb-wrapper:nth-child(odd) { background-color: #e4dfce; }

任何建议将不胜感激。谢谢。

【问题讨论】：

能否添加生成循环的 Wordpress (PHP) 代码？
感谢您的回复。 Loop 的代码是由插件生成的，所以我无法提供 PHP 代码，但这是我试图让它工作的页面：goo.gl/cIE4Wg
尝试将odd 更改为2n 并使用您想要的背景颜色和2n+1 创建另一个类。
我尝试了你的建议，它返回的结果与使用奇数相同。

标签： wordpress css-selectors

【解决方案1】：

您下面提到的代码很好，您可以提供指向您的网站或 jsfiddle 的链接。这可能只是与其他已定义样式的 css 冲突

.lb-wrapper:nth-child(odd) { background-color: #e4dfce; }

【讨论】：

此代码不起作用，因为您定位的元素 .lb-wrapper 彼此不相邻，因此 nth-child 奇数甚至不会在这里工作。解决方法是通过您的 wordpress 循环添加一些标识符类。

【解决方案2】：

我用来创建 WordPress 循环的 LoopBuddy 插件的开发人员为我的问题提供了以下解决方案：

.loop-content .hentry:nth-child(2n+1) {background-color: #e1771e;}

来自开发人员的其他 cmets： “您没有正确使用选择器。您的代码假定“在 lb-wrapper 类中，有多次出现”。但是，您想要将所有出现的 lb-post-wrapper 类定位为“内部”另一个类，例如循环。”

【讨论】：