Html 第n个子项覆盖第一个子项

在重复设计中，我需要3种样式，而无需更改HTML端的类。我一直在尝试使用第n个子选择器来实现这一点。第一个类需要有一个不同于偶数和奇数类的背景图像。我的奇数类一直覆盖我的第一个子类。我试着把它改成第n个孩子（2n+3），但也没有运气。 如何让我的第一个子div保留其背景图像

/* Even Featured */

.home-feature-container:nth-child(even)
{
    background-color:#393939;
    padding-bottom: 20px;    
}    

.home-feature-container:nth-child(even) .home-featured-left
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-gray.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

.home-feature-container:nth-child(even) .home-featured-right
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-spacer-gray.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

/* Odd Featured */

.home-feature-container:nth-child(2n+3)
{
    background-color:#252424;
    padding-bottom: 20px;    
}    

.home-feature-container:nth-child(2n+3) .home-featured-left
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-black.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

.home-feature-container:nth-child(2n+3) .home-featured-right
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-spacer-black.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}  

/* First Featured */

.home-feature-container:first-child 
{
    background-color:#252424;
    padding-bottom: 20px;    
}    

.home-feature-container:first-child  .home-featured-left
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-first.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

.home-feature-container:first-child  .home-featured-right
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-spacer-first.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}  

还有HTML

    <div class="div_wrapper home-feature-container">
        <div class="home-featured-left">
            <div class="home-featured-left-content">
            <h3 class="title">Feature</h3>
            <h3>Sed tincidunt purus</h3>
            <div class="home-featured-copy">Eu lectus varius auctor. Integer et elit bibendum, fermentum velit a, aliquam est. Donec varius arcu rutrum lorem ultrices, et tristique leo pretium. Nam porttitor lacinia nunc, sit amet maximus justo placerat ac. Curabitur ut tellus sed nisi faucibus.
            </div>
            </div>
        </div><div class="home-featured-right">
            <div class="home-featured-right-content"><img src="/images/featured-image-home.jpg" class="home-featured-image" /></div>
        </div>
    </div>

特征
塞德·丁西杜特普卢斯酒店
欧盟葡萄品种拍卖商。整粒和精粒啤酒，发酵液，阿利奎姆等。请不要食用任何一种植物。拉齐尼亚·努克（lacinia nunc）是一位伟大的艺术家，他坐在库拉比图尔（Curabitur）的椅子上。

如果我正确理解了这个问题，那么选择器没有选择html中的任何内容，您需要选择home feature container div的子项

为了简单起见，我使用了通配符（*），请参见

您的HTML:

<div class="div_wrapper home-feature-container">
  <div class="home-featured-left">
    <div class="home-featured-left-content">
      <h3 class="title">Feature</h3>
      <h3>Sed tincidunt purus</h3>
      <div class="home-featured-copy">Eu lectus varius auctor. Integer et elit bibendum, fermentum velit a, aliquam est. Donec varius arcu rutrum lorem ultrices, et tristique leo pretium. Nam porttitor lacinia nunc, sit amet maximus justo placerat ac. Curabitur ut tellus sed nisi faucibus.
      </div>
    </div>
  </div><div class="home-featured-right">
  <div class="home-featured-right-content"><img src="/images/featured-image-home.jpg" class="home-featured-image" /></div>
  </div>
</div>

/* Even Featured */

.home-feature-container *:nth-child(even)
{
    background-color:#393939;
    padding-bottom: 20px;    
}    

.home-feature-container *:nth-child(even) .home-featured-left
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-gray.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

.home-feature-container *:nth-child(even) .home-featured-right
{
    width:50%;
    display:inline-block;
    background-image: url('/images/featured-top-spacer-gray.png');
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    vertical-align: top;
}    

/* Odd Featured */

.home-feature-container *:nth-child(2n+3)
{
    background-color:#252424;
    padding-bottom: 20px;    
}

---

很难从代码中分辨出问题所在；您的目标是

.home功能容器：第一个孩子。home功能正确

，但在没有看到更多HTML的情况下，不清楚该

.home功能容器

是否实际上是

第一个孩子

。你能用完整的代码创建一个可运行的代码段或代码笔，和/或附上你想要完成的事情的图片吗？我认为N个孩子不适合

。它适用于像

这样的列表。一个简化的测试用例显示

:first child

可以毫无问题地覆盖前面的

:nth child

，因此我怀疑问题出在其他地方。首先，你有很多令人困惑和不必要的重复风格；如果简化这些，您可能会发现您的问题。@Jozi Bashaj nth-child（）确实适用于div。A好吧，它适用于任何元素。通常，如果您发现一条规则凌驾于另一条规则之上，请更改其中一条规则的特殊性。