欢迎来到DIVCSS5查找CSS资料与学习DIV 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