:focus表示当前元素处于focus状态时候的样式；
而:focus-within表示当前元素或者当前元素的子元素处于focus状态的样式；
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
form {
margin:100px;
padding: 20px;
transition: outline .2s;
}
form:focus-within {
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
</style>
</head>
<body>
<form>
<input placeholder="输入姓名" style="width:100%;" />
</form>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
