欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

Css中一直被忽视的一个属性

 

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背景色。而且如果其后代元素获得焦点时,其背景色也会更改,所以<input>收到焦点时,div的背景色仍是#aaa

这样,我们就不需要实现这样功能时,总是使用JavaScript,极大方便开发者。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r37490.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-08-13 02:14 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。