• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :focus-within

    版本:css3

    :focus-within是一个CSS 伪类,表示一个元素获得焦点,或,该元素的后代元素获得焦点。换句话说,元素自身或者它的某个后代匹配:focus伪类。(shadow DOM 树中的后代也包括在内)

    语法:

    E:focus-within{sRules}
    /* 当 <div> 的某个后代获得焦点时,匹配 <div> */
    div:focus-within {
      background: cyan;
    }
    

    该选择器非常实用。举个通俗的例子:表单中的某个<input>字段获得焦点时,整个表单的<form>元素都可被高亮。

    浏览器支持

    IE不支持:focus-within,其余浏览器都支持:focus-within

    例子

    此例子中,当表单某个文本输入框获得焦点后,表单会被设置颜色样式。

    <select multiple>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option selected>选项4</option>
        <option>选项5</option>
        <option>选项6</option>
    </select>
    
    
    //CSS
    
    option:default {
        color: red;
    }

    试试在这个表单中输入点什么。

    <form>
      <label for="given_name">Given Name:</label>
      <input id="given_name" type="text">
      <br>
      <label for="family_name">Family Name:</label>
      <input id="family_name" type="text">
    </form>
    <style>
    form {
      border: 1px solid;
      color: gray;
      padding: 4px;
    }
    
    form:focus-within {
      background: #ff8;
      color: black;
    }
    
    input {
      margin: 4px;
    }
    </style>
    

    上篇::default

    下篇::out-of-range