如何用CSS选择器覆盖hamburger-react下无类名div的背景色

• 选择器定位逻辑错误：你写的div.close-overlay-btn:nth-child(2)目标是「作为父级第二个子元素、class为close-overlay-btn的div」，但实际DOM里close-overlay-btn是hamburger-react的直接父容器，根本不满足nth-child(2)的匹配规则
• 选择器层级错误：就算命中了close-overlay-btn，也没有深入到hamburger-react内部的子div层级，改不到你要的线条元素
• 目标元素的背景色是写在内联style属性里的，默认优先级高于外部CSS，必须搭配!important才能覆盖。

推荐用高精准度的直接子选择器，不会误选其他元素，完美适配你给出的DOM结构：

.close-overlay-btn .hamburger-react > div {
  background: rgba(0, 100, 172, 0.411) !important;
}

如果你的页面里hamburger-react不会出现在其他close-overlay-btn以外的位置，也可以写得更简洁：

.hamburger-react > div {
  background: rgba(0, 100, 172, 0.411) !important;
}

• .close-overlay-btn .hamburger-react：先定位到对应DOM结构里的汉堡按钮容器，避免匹配页面其他地方同名class的元素
• > div：只选中hamburger-react容器下的第一层直接子div，正好对应组成汉堡/关闭图标的3根线条元素，不会误选嵌套更深的无关元素
• 声明末尾的!important会把这条规则的优先级拉到最高，覆盖子div上写的内联背景样式。

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