CSS参考手册
选择 | Selectors
:focus-within
该:focus-within
CSS伪类匹配任何:focus
伪类所匹配的元素或后代中有:focus
伪类所能匹配的节点的元素。(这包括shadow trees中的后代)
/* Selects any <div> when one of its descendants is focused */
div:focus-within {
background: yellow;
}
举个例子来说,当用户关注于其表单输入之一时,这对于突出显示整个表单容器是有用的。
语法
:focus-within
实例
.name-container {
padding: 4px;
}
.name-container:focus-within {
background: yellow;
}
input {
margin: 4px;
}
<p>The div below will have a yellow background if
either input inside is focused.</p>
<div class="name-container">
<label for="given_name">
Given Name:
<input id="given_name" type="text">
</label>
<label for="family_name">
Family Name:
<input id="family_name" type="text">
</label>
</div>
规范
Specification |
Status |
Comment |
---|---|---|
Selectors Level 4The definition of ':focus-within' in that specification. |
Working Draft |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
601 |
No support2 |
52.0 (52.0)3 |
No support |
47 |
10.1 |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support |
601 |
52.0 (52.0)3 |
No support |
47 |
10.3 |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。