css focus-within

效果图

直接上代码

<div class="main">
  <div class="a">

    <button>A</button>
  </div>
  <div class="b">
    <button>B</button>
  </div>
</div>

<style>
  .main {
    display: flex;

  }

  .a,
  .b {
    width: 300px;
    height: 300px;
    background-color: grey;
  }

  .a:focus-within {

    background-color: red;
  }

  .b:focus-within {

    background-color: blue;
  }

</style>

简单来说是用于元素下有可触发fouce事件的方法，来改变样式