在元素上应用：focus伪类

Question

在这里，我想在输入字段上发生焦点事件时编辑标签的某些属性，

但是它不起作用，当输入字段获得焦点时，标签元素没有变化，我该怎么办以下两种方法都不适合我。

我将其写为

  .input-field:focus + .input-label{
     background : black;
   }
   or
  .input-field:focus .input-label{
     background : black;
   }

这两种方法都不适合我。

Answer 1

使用:focus-within伪选择器来实现所需的功能。如果元素获得焦点，或者包含另一个包含焦点的元素，则此选择器起作用。

.container:focus-within label{
  background-color: red;
}

<div class="container">
  <label>Label</label>
  <input type="text">
</div>

您可以了解有关此选择器here的更多信息。请注意，IE中不支持此方法，但是谁在乎...