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

所提及的选择器

Answer 2

如果您愿意，也可以从jquery设置背景颜色。 你可以做点什么

if($('.form-group').find('input-group-addon').length !== 0) {
     $('.form-group').css("background-color", "yellow");
}