如何通过父div的aa-prime类选中内部嵌套的目标子div设置样式

问题原因 #

• 你写的.aa-prime > div:nth-child(2)选择器匹配的是.aa-prime直接子元素中的第二个div，但你的.aa-prime下只有1个直接子div（class为row的容器），所以匹配不到任何元素。
• 你写的.aa-prime div:nth-child(2)匹配的是所有后代元素中的第二个子div，实际匹配到的是右侧的col-11容器，和你要的目标元素完全相反。

正确写法 #

写法1（兼容所有浏览器，按层级匹配）

直接选中row下的第一个子div，也就是你要的左侧图标容器，适合结构不会随意调整的场景：

.aa-prime .row > div:first-child {
  background-color: #036A96 !important;
  /* 左侧圆角设置 */
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
  /* 其他自定义样式 */
}

写法2（不依赖元素顺序，更灵活）

如果担心后续调整列的顺序导致匹配错误，可以用:has()选择器直接匹配包含fa图标的div，现代浏览器均支持：

.aa-prime div:has(i[class*="fa-"]) {
  background-color: #036A96 !important;
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
}

额外优化提示 #

你当前的.aa-callout设置了padding-left:15px，如果要让左侧色块完全贴合警告框的左圆角，需要把padding-left改为0，然后给右侧的col-11加上左边内边距即可。

内容的提问来源于stack exchange，提问作者Steve