：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 {}