斑馬條紋與CSS選擇

Question

我有下面的代碼片段：

<div class="data"> 
    <h2>Some Title</h2> 
    <div id="aPanel75" class="aPanel"> 
     <span> 
      <div class="nameValueHelp field"> 
       <span class="name">Field Label 1</span> 
       <span class="value"><span>Value 1</span></span> 
       <span class="help">...</span> 
      </div> 
     </span> 
     <span> 
      <div class="nameValueHelp field"> 
       <span class="name">Field Label 2</span> 
       <span class="value"><span>Value 2</span></span> 
       <span class="help">...</span> 
      </div> 
     </span> 
     <span> 
      <div class="nameValueHelp field"> 
       <span class="name">Field Label 3</span> 
       <span class="value"><span>Value 3</span></span> 
       <span class="help">...</span> 
      </div> 
     </span> 
    </div> 
</div> 

即得到斑馬條紋有位的jQuery和CSS：

$('.data .field').filter(':even').addClass('odd'); 

和

.data .odd { 
    background-color: #EDF0F5; 
} 

我想擺脫添加'奇怪'類，只使用CSS的jQuery。我已經嘗試過CSS nth-child選擇器的各種組合（也是第n個類型）。但似乎沒有任何工作，我全身灰白，沒有白色。

我認爲div.field周圍的多餘span標籤是問題，但不幸的是，我不能輕易更改底層HTML結構或更改任何標籤類。

有什麼建議嗎？

Answer 1

您不能使用.field:nth-child(odd)或.field:nth-of-type(odd)，因爲每個.field是其母公司span的第一個也是唯一的子女div。這可能是你陷入困境的地方。

由於每個.field嵌入在它自己的父span，每個span是你的面板div的孩子，你可以使用這個：

.data > .aPanel > span:nth-child(odd) > .field 

雖然我應該說，就像你可以」不改變標記，div s仍然被嵌入span s ...即使瀏覽器會相應地構建DOM，但請記住，始終依賴這種行爲並不明智。