跨多個家長選擇第n個孩子

Question

我有以下標記：

<div class="foo"> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul> 
     <li>three</li> 
    </ul> 
    <ul> 
     <li>four</li> 
    </ul> 
</div> 

我想風格「一」和「三」。

然而，標記也可以是：

<div class="foo"> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 
    <ul> 
     <li>four</li> 
    </ul> 
</div> 

我使用下面的CSS嘗試：

.foo li:nth-child(1), 
.foo li:nth-child(3) 
{ 
    color:red; 
} 

然而，正如預期的，這是每個造型的ul的第一個孩子。 （演示：http://jsfiddle.net/hTfVu/）

如何更改我的CSS，這樣我可以針對第一和第三li屬於.foo？

Answer 1

你不能單獨使用CSS選擇器。 :nth-child()和兄弟姐妹組合器僅限於共享同一父母的孩子/兄弟姐妹，如其名稱所暗示的，CSS選擇器無法解釋親子結構中的這種變化，也沒有像:nth-grandchild()選擇器那樣的任何東西（即使:nth-match() from Selectors 4僅限於其自身僅共享同一父母的元素）。

當然，像jQuery這樣的東西變得微不足道：$('.foo li:eq(0), .foo li:eq(2)')否則，你將不得不明確地使用類或ID標記第一個和第三個li元素，然後選擇它們。

Answer 2

你可以使用偶數和奇數選擇器。

li:nth-child(odd) { 
    color: red; 
} 
li:nth-child(even) { 
    color: white; 
}