：focus-within的冒泡触发
生活随笔
收集整理的这篇文章主要介绍了
：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的原创文章，尽在：“汪子熙”:
总结
以上是生活随笔为你收集整理的：focus-within的冒泡触发的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： flash如何制作沙滩上的雨伞
- 下一篇： 一个使用：focus-within伪类实