Open wingmeng opened 4 years ago
:focus-within 是一个CSS 伪类,表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代只要有被 focus,则该元素就会匹配这个伪类。这是一个非常有特色的伪类,因为它可以“回溯”父级。
:focus-within
focus
示例:
当表单元素的任一后代元素(文本框、下拉框、复选框、a 链接)获得焦点时,整个表单的边框色和背景色发生变化
.ui-form { padding: 20px; border: 1px solid #ccc; } .ui-form:focus-within { border-color: #06c; background: rgba(180, 180, 255, .2) }
<form class="ui-form"> 表单任意元素获得焦点时,匹配 :focus-within 伪类,表单背景色和边框色发生变化 <p> <input type="text"> </p> <p> <select> <option>第 1 项</option> <option>第 2 项</option> <option>第 3 项</option> <option>第 4 项</option> </select> </p> <p> <label><input type="checkbox"> 复选框</label> </p> <a href="##">我是链接</a> </form>
:focus-within
是一个CSS 伪类,表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代只要有被focus
,则该元素就会匹配这个伪类。这是一个非常有特色的伪类,因为它可以“回溯”父级。示例: