我怎样才能改变每隔一个div的第二类的背景

Question

我想为每一个具有特定类的第二个div col-forum-main-cat另一个backgroundcolor。我已经尝试过：第n个孩子（偶数）和（奇数），但它不适合我。

的标记是在这里，和结构不能改变，因为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

如果你不能或不想使用JavaScript，那么我会手动创建一个新的CSS类，并将其应用于你想要的每个div。

如果这是可以动态增长的东西，那么你会想要使用JavaScript。你可以使用jQuery的“：odd”选择器来处理这个问题。举例如下...

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

Answer 2

我不认为这是可能只CSS。

既然你使用jQuery标签这个你可以使用此代码：

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

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

---

注：

您也可以只使用：

$（“.col-forum-main-cat：odd”）.css（“background-color”，“red”）;

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