：focus-within的冒泡触发
生活随笔
收集整理的這篇文章主要介紹了
：focus-within的冒泡触发
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
看個具體的例子：
<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的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的：focus-within的冒泡触发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flash如何制作沙滩上的雨伞
- 下一篇： 一个使用：focus-within伪类实