less - 在输入焦点上更改标签的颜色。如何？

Question

在输入 focus我想更改标签元素的颜色。我怎样才能以更少的时间实现这一目标？

.control-label{
      color: @gray-light;
}
.controls{
  input,
  textarea{
    background-color:red; 
    &:focus{
      .control-label &{
        color: red;  //HERE
      }

    }
}

HTML:

<div class="control-group">
    <label class="control-label" for="inputEmail">Firstname</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Firstname">
    </div>
</div>

Answer 1

我不认为你可以不改变你的 HTML，另见:Is there any way to hover over one element and affect a different element? ，你的元素应该是直接的兄弟元素。 (LESS 在这里无助于解决您的问题，LESS 生成 CSS 并且在 CSS 中似乎不可能做到)

可能的建议:

input:focus + .control-label
{
    background-color:purple;
    color: red;
}
.controls > input
{
    float:right;
}	

<div class="controls">
    <input type="text" id="inputEmail" placeholder="Firstname">
    <label class="control-label" for="inputEmail">Firstname</label>
</div>

或者用javascript解决你的问题: https://stackoverflow.com/a/20226218/1596547