CSS - 通过另一个 div 类设置输入背景

Question

我有这个简单的表格:

 <div class="form-group">
  <label>Date:</label>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </div>
    <input type="text" class="form-control">
  </div>
</div>

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="form-control">
  </div>

当 form-group 有 input-group-addon 时，我需要设置背景颜色。在这个例子中:第一个输入有背景颜色，最后一个没有。

这是我的CSS:

.form-group:has(.input-group-addon) > input{
      background: yellow;
  }

我的问题在哪里？

Answer 1

你需要这个选择器:

.form-group .input-group-addon + input{
  background: yellow;
}

编辑:修复了@Ilya提到的选择器