CSS之:focus-within自身或某个后代focus的伪类

1. 什么是:focus-within？

:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。

在表单中，这个伪类非常有用。

2. 兼容性

需要注意的是，IE不支持。

3. 例子

看下面这个例子，在input被选中的时候，隐藏*，并把整行变为灰色。

demo: https://jsfiddle.net/6epmr4u8/

<form>
  <div class="field">
    <span>name：</span>
    <input type="text">
  </div>
  <div class="field">
    <span>age：</span>
    <input type="text">
  </div>
</form>

有field类的div在后代元素input被focus时，颜色发生变化，*的伪类也不显示。

.field{
  padding: 10px;
  &:focus-within{
    background-color: #f0f0f0;
    &::after{
      display: none;
    }
  }
  &::after{
    content:'*';
    color: red;
  }
}