Question

我在重复设计中需要3种样式而不更改HTML方面的类。我一直试图通过n-child选择器来实现这一目标。第一类需要具有与偶数和奇数类不同的背景图像。我的奇怪课程一直在压倒我的第一个孩子班。我尝试将它改为n-child（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>

Answer 1

如果我正确理解了这个问题，那么选择器不会在你的html中选择任何东西，你需要选择home-feature-container div的子代。

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

您的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>

修改后的CSS：

/* 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;    
}

第n个孩子压倒第一个孩子

1 个答案: