CSS第n个孩子（奇数）不工作

Question

我需要交替类jl-member-info的背景颜色，但这不起作用。我有这样的代码：

.uk-grid .jl-member-item .jl-member-info:nth-child(odd) { 
 
    position: relative; 
 
    padding: 0 0.9rem; 
 
    background-color: rgba(0, 198, 197, 0.89); 
 
    width: 100%; 
 
    margin-top: -95px; 
 
} 
 

 
.uk-grid .jl-member-item .jl-member-info:nth-child(even) { 
 
    position: relative; 
 
    padding: 0 0.9rem; 
 
    background-color: #090963; 
 
    width: 100%; 
 
    margin-top: -95px; 
 
}

<div class="jl-member "> 
 
    <div class=" uk-grid-large uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin=""> 
 
    <div class="jl-member-item default uk-row-first"> 
 
     <div class="jl-member-item-img"> 
 
     <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> 
 
     </div> 
 
     <div class="jl-member-info"> 
 
     <div class="jl-member-name">Alain</div> 
 
     <div class="jl-member-role">Maire</div> 
 
     <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="jl-member-item default"> 
 
     <div class="jl-member-item-img"> 
 
     <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> 
 
     </div> 
 
     <div class="jl-member-info"> 
 
     <div class="jl-member-name">Alain</div> 
 
     <div class="jl-member-role">Maire</div> 
 
     <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="jl-member-item default"> 
 
     <div class="jl-member-item-img"> 
 
     <img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4"> 
 
     </div> 
 
     <div class="jl-member-info"> 
 
     <div class="jl-member-name">Alain</div> 
 
     <div class="jl-member-role">Maire</div> 
 
     <div class="jl-member-desc"><a href="mailto:mail@test.fr"><span class="cloaked_email">mail@test.fr</span></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你需要重新编写这样的，因为你只有一个.jl-member-info在.jl-member-item它总是会奇怪！

.uk-grid .jl-member-item .jl-member-info { 
    position: relative; 
    padding: 0 0.9rem; 
    width: 100%; 
    margin-top: -95px; 
    background-color: #090963; 
} 

.uk-grid .jl-member-item:nth-child(odd) .jl-member-info { 
    background-color: rgba(0, 198, 197, 0.89); 
}