css focus-within

Sam young

于 2022-12-06 14:49:34 发布

阅读量115

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/young_sam/article/details/128202907

版权

效果图

在这里插入图片描述

直接上代码

<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>