看个具体的例子：
<html>
<style>
html,
body,
.g-father,
.g-children {
padding: 30px;
border:1px solid green;
}
input {
display: block;
border: none;
outline: none;
border: 1px solid black;
margin: 0 auto;
}
input:focus {
background: yellow;
}
html:focus-within {
background: red;
}
body:focus-within {
background: purple
}
.g-father:focus-within {
background: white;
}
.g-children:focus-within {
background: pink;
}
.g-html,
.g-body,
.g-fath,
.g-chil {
position: fixed;
}
.g-html {
left: 30px;
top: 10px;
}
.g-body {
left: 60px;
top: 40px;
}
.g-fath {
top: 70px;
left: 90px;
}
.g-chil {
top: 100px;
left: 120px;
}
</style>
<div class="g-father">
<div class="g-children">
<input type="button" value="Button">
</div>
</div>
<div class="g-html">HTML</div>
<div class="g-body">BODY</div>
<div class="g-fath">Father</div>
<div class="g-chil">Children</div>
</html>
初始页面：
button获得focus后：
button变成黄色：
children变成粉色，father变成白色，body变成紫色，html变成红色
更多Jerry的原创文章，尽在："汪子熙":
网友评论