html - CSS父/兄弟选择器

Question

我有这样的东西

<form class="Form">
  <FormField>
    <label class="FormLabel" ..>
    <div class="FormInput">
      <div class="InputField">
        <input../>
      </div>
    </div>
  </FormField>
</form>

当 input 获得焦点时，我需要将样式应用于 FormLabel。
我知道我们无法获得 parent 选择器( Is there a CSS parent selector? ) 我想要一个变通方法来使用仅使用 css(不使用 jquery)访问父级

我在 LESS 中使用 & 尝试了这个

.Form {
  .FormField {
    .Input:focus & .FormLabel {
       border:green
     }
   }
}

仍然没有运气:/..我错过了什么？谢谢!

Answer 1

目前无法使用 CSS 选择元素的父项。它必须使用 JavaScript/jQuery 来完成。

由于无法获取焦点项(在本例中为输入)的父项，因此无法使用纯 CSS 更改其样式。