在CSS中 :focus-within 是一个伪类，CSS中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。
css中:focus-within是什么
在CSS中 :focus-within 是一个伪类，现在已经被列入到CSS选择器中（CSS Level 4 selector）。CSS中伪类:focus-within能非常方便处理获取焦点状态， 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。
<div class="container" tabindex="0">
<label for="text">Enter text</label>
<input id="text" type="text" />
</div>
<style>
.container:focus-within {
background-color: #aaa;
}
</style>
:focus-within的使用场景
1、表格行的高亮
tbody tr:focus-within,
tbody tr:hover {
background: rgba(lightBlue, .4);
}
2、下拉菜单
.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
opacity: 1;
transform: translateY(0px);
height: auto;
z-index: 1;
}
服务热线 19970861797
