css - 为什么背景颜色在 div 的焦点上没有改变？

Question

我有div其中我有 input和按钮。我想更改 background-color parent 的div当我专注于 input div 。但它不起作用。我们可以使用 css not javascript 来做到这一点吗？ .

我试过这样

.a:focus{
  background-color:red;
  border:2px solid grey;
} 

但是为什么不行呢？

我想当我focus至 input比父字段div有类 "a"将变为 background-color:red并且边框变成红色

这是我的代码 https://jsbin.com/kimejehane/1/edit?html,css,output

<div class="a">
    <div class="b">
      <input type="text">
      <button>aa</button>
    </div>
  </div>

Answer 1

如果你想改变具有类 b 的父 div 的背景，那么试试这个。

.b:focus-within {
  background-color:red;
  border:2px solid grey;
}