CSS 样式化父 div 内的第二个嵌套 div

Question

我有一些嵌套的 div 用作警报框。我想在父 div 上使用一个类来驱动其中 div 的样式。

<div class='aa-callout aa-prime'>
  <div class='row p-1 h-100'>
    <div class='col-1 d-flex align-items-center'>
      <i class="fal fa-exclamation-circle fa-3x text-white mx-auto"></i>
    </div>  
    <div class='col-11'>
      <h4>Blue is for information</h4>
      <p>Sed ut perspiciatis unde.</p>
    </div>
  </div>  
</div>

我需要让包含

• 嗨：）内部的div也有类，你为什么不使用它们而不是像div一样访问它们。
• 为什么不简单地.aa-prime > div > div:first-child？
• @Azu - 这些是动态的，我们想将一个类应用到父类并让其他一切都到位。
• @j08691 - 谢谢 - 与我使用的解决方案非常相似。

Answer 1

如果该结构是固定的（即非动态的），您可以使用此选择器：

.aa-prime > div:first-child > div:first-child { ...

（注意：:nth-child(2) 不起作用，因为第二个 div 是第一个 div 的子代）