:nth-child 定位嵌套的 div

Question

我很難找到一種方法來做到這一點。 這是我的結構：

<div class="flex_container">
    <div class="flex_item_9">
        <div class="flex_label">First Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Second Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Third Label</div>
        <div class="flex_data">Some Data</div>
    </div>
</div>

這個 div 結構在 PHP While 循環中被重復，因為它是從數據庫中提取的。 在桌面上，我想在第一個顯示后隱藏 flex_label div。 我只想為每個 while 循環顯示一次標簽。 我認為 :nth-child 會起作用，所以我在我的 CSS 中嘗試了以下內容。

div.flex_container .flex_label:nth-child(2) {
      display: none;
}

但是，沒有結果。 瀏覽器中沒有任何變化。 顯示了所有 flex_labels。

這是可以在 CSS 中處理的東西，還是我需要將某些東西合並到我的 while 循環中以向每個 DIV 塊添加額外的類？

編輯

如果要顯示 3 個項目：

 <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> </div> <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> </div> <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> </div>

我的目標是讓它像桌面上的電子表格一樣顯示。 單行標簽和多行數據。 移動顯示會有所不同，但已經可以使用了。

Answer 1

以下選擇器應該可以工作：

/* flex_label inside flex_container that is 2nd (or 3rd or 4th or ...) child */
.flex_container:nth-child(n + 2) .flex_label {}


/* flex_label inside flex_container that follows a flex_container */
.flex_container ~ .flex_container .flex_label {}