:focus-within的冒泡触发

看个具体的例子:

<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的原创文章,尽在:“汪子熙”:

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页