CSS - 父母下任何位置的第一個元素的選擇器

Question

如何在不必使用特定的div的情況下爲「標籤1」選擇器？我認爲#wrapper label:first-of-type會做的伎倆，但似乎是選擇每個標籤。

<div id="wrapper"> 
    <div class="row"> 
     <div class="content-1"> 
      <label>Label 1</label> 
     </div> 
     <div class="content-2"> 
      <label>Label 2</label> 
     </div> 
     <div class="content-3"> 
      <label>Label 3</label> 
     </div> 
     <div class="content-4"> 
      <label>Label 4</label> 
     </div> 
    </div> 
</div> 

Answer 1

#wrapper label:first-of-type是行不通的，因爲每個label是第一它的類型之內它的直接父。這是關鍵，這些選擇器總是相對於直接父母。

所以，你可以做這樣的事情：

#wrapper div:first-child > label

這將選擇任何label元件，其一個div的直接子這是第一個孩子在它的父

Answer 2

使用第n個孩子

#wrapper .content-1:nth-child(1) label{ 
 
background: red; 
 
}

<div id="wrapper"> 
 
    <div class="row"> 
 
     <div class="content-1"> 
 
      <label>Label 1</label> 
 
     </div> 
 
     <div class="content-2"> 
 
      <label>Label 2</label> 
 
     </div> 
 
     <div class="content-3"> 
 
      <label>Label 3</label> 
 
     </div> 
 
     <div class="content-4"> 
 
      <label>Label 4</label> 
 
     </div> 
 
    </div> 
 
</div>