html - CSS nth-child(odd)无法正常工作

我需要替换类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:[email protected]"><span class="cloaked_email">[email protected]</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:[email protected]"><span class="cloaked_email">[email protected]</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:[email protected]"><span class="cloaked_email">[email protected]</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

您需要像这样重新编码，因为在.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);
}

关于html - CSS nth-child(odd)无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44968119/