：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块添加其他类？

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