html - 更改子元素背景 CSS

Question

我是 CSS 的新手，这里的 HTML 结构：

<nav id="navbar" class="navbar navbar-expand-sm">
    <a class="navbar-brand ml-4" href="#">
        <img src="images/logo-light.svg" alt="" width="30" height="90" class="d-inline-block align-top" id="navlogo">
    </a>
    <button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button">
        <span> </span>
        <span> </span>
        <span> </span>
    </button>
</nav>

我需要做的是，如果我添加一个类“黑色”，navbar我需要打开 css 背景颜色navbar-toggler来变成白色。我如何用 CSS 做到这一点？

我认为它应该是这样的：

. navbar .black .navbar-toggler span{
    background: #000 !important;
}

但它不工作

Answer 1

你非常亲近。

通过去.navbar .black，你的目标.black是在里面.navbar。但是通过这样做，您的目标是同时具有和.navbar.black的元素。.navbar.black

.navbar.black .navbar-toggler span{
    background: #FFF!important;
}

Answer 2

你可以使用 javascript addEventListener

const nav = document.querySeletor('#navbar)
('#navbar_toggler').addEventListener('toggle',function(){
    nav.classList.toggle('bg')
  
})

.bg{
background-color:black;
}