这是一个CSS的新伪类,新CSS伪类:focus-within

偶然间发现新的CSS伪类:focus-within,能十分方便处理获取焦点状态。

当元素自身或其后代取得焦点时,:focus-within伪类的元素就会有效。

没看懂,能够看下面的比如:

 

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>
.container:focus-within { 
  background-color: #aaa; 
}

 

假如div.container获取到焦点时,就会有一个#aaa背景色。并且假如其后代元素取得焦点时,其背景色也会更改,所以收到焦点时,div的背景色仍是#aaa。

这么,我们就不需求完成这么功用时,老是运用JavaScript,极大方便开发者。

但是,浏览器支撑:focus-within还是很少,不过信任很快,就会全部支撑。

未经允许不得转载:绿岛小站 » 这是一个CSS的新伪类,新CSS伪类:focus-within

赞 (0)

评论 0

评论前必须登录!

登陆 注册