Css 如何在每个节中仅显示此类型的第一个组件？

我有x数量的部分，他们有x数量的子部分，如果条件为真，他们会显示一个小弹出窗口，但情况可能是，条件可能为真，每个部分超过一个，但我只想显示每个部分的第一个弹出窗口

我尝试了：first of type，（：not），为弹出窗口设置一个id，all设置一个display:none，为不是第一个类型的部分的所有元素设置一个display:none

<div>
   <section>
      <Subsection><PopUp /> </Subsection>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
   </section>
   <section>
      <Subsection> </Subsection>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
   </section>

   <section>
      <Subsection> </Subsection>
      <Subsection><PopUp /> </Subsection>
      <Subsection><PopUp /> </Subsection>  
      <Subsection><PopUp /> </Subsection>
      <Subsection> </Subsection>
   </section>
<div>

}

这只是一个示例，我还有几个样式、组件和类，但是任何与此相关的解决方案都适用于我的原始代码

但是，作为参考，这是样式化组件

export const ProWrapper = styled.div`
  position: absolute;
  bottom: 35px;
  display: ${({ open }) => !open && 'none'};
`; /popup component/

export const SectionWrapper = styled.div`
  ${ProWrapper}:first-of-type {
    opacity: 0.7;
  }
`; /section component/

在这个例子中，我设置了不透明度：0.7，页面中的所有弹出窗口都得到了这个规则，而不仅仅是第一个类型

更新：

我用javascript解决了这个问题，用一种我认为更简单的方式，javascript是我的第一个选择，但我无法让它第一次工作

解决方案：我为每个部分创建一个flag=false，只有当flag为false时，弹出窗口才会呈现，并且我在弹出窗口呈现时将flag值设置为true

---

尽管如此，我还是不明白为什么我无法通过css访问第一个类型，因此，我不会关闭此问题，因为通过css处理此问题的问题仍然存在。

您是否尝试过

小节：非（：第一个孩子）弹出窗口

？是的，@mulsun，但它只为子节中的弹出窗口设置规则，我的意图是每个小节只呈现一个弹出窗口，而不是每个小节。

section subsection:not（：first child）popup{display:none}

隐藏每个小节的第一个小节的弹出窗口。还是我没有得到？你能提供JSFIDLE吗？

export const ProWrapper = styled.div`
  position: absolute;
  bottom: 35px;
  display: ${({ open }) => !open && 'none'};
`; /popup component/

export const SectionWrapper = styled.div`
  ${ProWrapper}:first-of-type {
    opacity: 0.7;
  }
`; /section component/