檢索多行div第一行內的第四個div標籤？

Question

這是我正在使用的html。我想用文字「所需元素」寫的項目CSS選擇器：

<div class="TopDiv"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span2"> 
        <strong>Text1</strong> 
       </div> 
       <div class="span3">Text2</div> 
       <div class="span2"> 
        <strong>Text3</strong> 
       </div> 
       <div class="span3">DESIRED ELEMENT</div> 
      </div> 
      <div class="row"> 
       <div class="span2"> 
        <strong>Text4</strong> 
       </div> 
       <div class="span3">Text5</div> 
       <div class="span2"> 
        <strong>Text6</strong> 
       </div> 
       <div class="span3"> 
        <div>Text7</div> 
        <div>Text8</div> 
        <div>Text9</div> 
        <div>Text10</div> 
        <div>Text11</div> 
        <div>Text12</div> 
        <div>Text13</div> 
       </div> 
      </div> 
     </div> 
</div> 

我有很多的麻煩到我想要的DIV，因爲我不完全理解的nth-child of type這或或者得到一個孩子的孩子。

我只想要一些很好的東西，它會檢索容器後第一行的第四個div標籤子元素。

Answer 1

選擇器取決於這是否是您的元素總是在的順序？

不管怎麼說，你可以使用：

.row:first-child > .span3:last-child 

這將選擇與類.span3這是第一個.row的孩子的最後一個元素。

jsFiddle here.

如果你想支持last-child在IE8及以前，總有Selectivizr。應在IE7/IE8工作

---

一個選擇可能是.row:first-child > .span3 ~ div.span3。

只使用這個雖然如果有正好兩個元素在.span3類行內。

jsFiddle here.

---

如果不是最後一個，但始終第四，使用.row:first-child > div:nth-child(4)。

jsFiddle here.

Answer 2

容器後的第一行的第4個div標籤的孩子。

的這些源代碼翻譯爲：

容器後

.container > 

第一行

.row:first-child > 

4 div標籤的孩子

div:nth-child(4) 

所以在一條線：

.container > .row:first-child > div:nth-child(4) 

找到容器類和兒童的在第一行類，並找到裏面的第4 div標籤。