css focus-within

最新推荐文章于 2025-12-09 13:48:31 发布

原创最新推荐文章于 2025-12-09 13:48:31 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

本文通过一个简单的示例展示了如何使用 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>