效果图
直接上代码
<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
事件的方法,来改变样式