很🐕的一个问题只能使用css实现，input获取焦点，改变父元素的颜色；
试了很久都是只能改变input的背景颜色，百度调研了很久，都是说纯CSS实现不了，找到一篇长篇大论的文章，在我以为我快要接近答案的时候，末尾来了一句纯CSS实现不了，用JS实现去了。
心态炸了！！！能用JS，鬼用css啊。
最后还是在MDN找见了解决方法，吹一波，🐂🍺。发泄完了，进入正题：
:focus-within
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树 (en-US)中的后代也包括在内）
/* 当 <div> 的某个后代获得焦点时，匹配 <div> */
div:focus-within {
background: cyan;
}
Copy to Clipboard
该选择器非常实用。举个通俗的例子：表单中的某个 <input> 字段获得焦点时，整个表单的 <form> 元素都可被高亮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#a{
width: 200px;
height: 200px;
background-color: black;
}
#a:focus-within{
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="a">
<input type="text">
</div>
</body>
</html>
注明：此文转载自兄弟：CSDN博主「满天星716」的原创文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
