Question

我希望每一个特定类 col-forum-main-cat 的第二个div都是另一个backgroundcolor。我已经尝试过了：nth-child（偶数）和（odd）但它对我不起作用。

标记位于此处，并且由于CMS而无法更改结构。

.col-forum-main-cat:nth-child(odd) {
    background:#dedede;
}

<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

Answer 1

我认为只用CSS就可以了。

由于您使用Jquery对此进行标记，因此您可以使用以下代码：

＆＃13;

$(document).ready(function(){
  $( ".col-forum-main-cat" ).filter( ":odd" ).css( "background-color", "red" );
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

＆＃13;

注意：

您也可以使用：

$（＆＃34; .col-forum-main-cat：odd＆＃34;）。css（＆＃34; background-color＆＃34;，＆＃34; red＆＃34;）;

但我使用filter使其更具可读性。

Answer 2

如果您不能或不想使用javascript，那么我只需手动创建一个新的css类并将其应用于您想要它的每个div。

如果这是可以动态增长的东西，那么您将要使用javascript。你可以使用jQuery＆＃34;：odd＆＃34;选择器来处理这个。一个例子如下......

Javascript（使用jQuery）：

$(".col-forum-main-cat").filter(":odd").addClass("col-forum-main-cat-odd");

CSS：

.col-forum-main-cat-odd {
     background-color:#dedede;
}

HTML：

<div class="row row-forum-main-head">
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
  <div class="col-xs-12 col-forum-main-baord">
    <strong>text</strong>
  </div>
  <div class="col-xs-12 col-forum-main-cat">
    <span>title</span>
  </div>
</div>

如何更改div的每个第二类的背景

2 个答案: