如何選擇身體內任何序列中的奇怪孩子？

Question

我有一個像這樣的html結構。

我怎樣才能實現背景顏色爲紅色或藍色根據他們的身體序列？

Answer 1

使用jQuery：

$(".my-class").filter(":odd").css("background","red"); 
 
$(".my-class").filter(":even").css("background","blue");

.common { padding: 20px 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="my-class common"></section> 
 

 
    <div class=""> 
 
     <section class="my-class common"></section> 
 
    </div> 
 

 
    <div class=""> 
 
     <div> 
 
      <section class="my-class common"></section> 
 
     </div> 
 
    </div> 
 

 
    <section class="my-class common"></section>

Answer 2

這是不可能與CSS選擇器。去用JavaScript：

Array.prototype.forEach.call(document.querySelectorAll('.my-class'), function(c, i){ 
    c.style.backgroundColor = i%2 === 0 ? "tomato" : "skyblue"; 
}); 

Working Fiddle

使用jQuery：

$('.my-class:even').css({'background-color': 'tomato'}); 
$('.my-class:odd').css({'background-color': 'skyblue'}); 

或者更好的是添加類，使用JavaScript/jQuery的，像my-class--odd和my-class--even持有的樣式。

Answer 3

有可能僅適用於使用nth-child CSS和直接子選擇：

body > div, 
 
body > section, 
 
body > section > div { 
 
    border: solid 1px green; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #aaa; 
 
} 
 

 
body > .my-class:nth-child(odd), 
 
body > :nth-child(odd) .my-class { 
 
    color: white; 
 
    background: red; 
 
} 
 

 
body > .my-class:nth-child(even), 
 
body > :nth-child(even) .my-class { 
 
    color: white; 
 
    background: blue; 
 
}

<div class="my-class">.my-class (first)</div> 
 
<div>div 
 
    <div class="my-class">.my-class (second)</div> 
 
</div> 
 
<section>section 
 
    <div>div 
 
    <div class="my-class">.my-class (third)</div> 
 
    </div> 
 
</section> 
 
<div class="my-class">.my-class (fourth)</div>