Question

我的目标是在相应的输入具有：focus

时更改标签颜色

我正在努力理解为什么一个有效，一个没有。有人可以解释发生了什么以及如何使非工作示例有效吗？

无效

<form>
  <div class="form-group">
    <label>Why does this not work</label>
    <input name="name" type="text" class="form-control" required>
  </div>
</form>
<style>
form input:focus + label {
  background: rgba(0, 0, 0, 0.5);
  color: red;
  z-index: 2;
  text-transform: uppercase;
}
<style>

工作

<form>
  <div class="form-group">
    <input name="name" type="text" class="form-control" required>
    <label>Why does this not work</label>
  </div>
</form>
<style>
form input:focus + label {
  background: rgba(0, 0, 0, 0.5);
  color: red;
  z-index: 2;
  text-transform: uppercase;
}
<style>

JSFiddle：https://jsfiddle.net/rjaqff2c/

Answer 1

CSS中的+选择紧跟在元素后面的元素。详细了解选择器here

Answer 2

+用于在加号前面的元素后立即定位元素。

在你的情况下

form input:focus + label

在输入后选择label，而不是前一个（如果存在）

查找更多信息here

更改输入焦点上的标签颜色

2 个答案: