电话
13363039260
CSS伪类:focus-within,能非常方便处理获取焦点状态。
当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。
没看懂,可以看下面的例子:
<div 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,极大方便开发者。