php - :nth-child to target nested divs

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 block 添加额外的类？

编辑

如果要显示 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 {}