为 html 提供两种背景颜色，但 css 不起作用

Question

我有一个要以 HTML 格式显示的表单，表单 HTML 代码如下：

<form action="<?php echo base_url('editAllProductsAction'); ?>" method="post">
  <?php foreach($products as $key=>$val){ ?>
  <div class="row">
    <h5></h5>
    <input type="hidden" value="<?php echo $val['id']; ?>" name="id[]" />
    <div class="col-lg-3">
      <label>Product Name</label>
      <input name="product_name[]" value="<?php echo $val['product_name']; ?>" type="text" class="form-control" />
    </div>
    <div class="col-lg-3">
      <label>Min Qty </label>
      <select name="min_qty[]" class="form-control">
        <?php for($i=1;$i<50;$i++){ ?>
        <option <?php if($i==$val[ 'min_qty']) echo 'selected'; ?> value="
          <?php echo $i; ?>">
          <?php echo $i; ?>
        </option>
        <?php }?>
      </select>
    </div>
    <div class="col-lg-3">
      <label>Purchase Price </label>
      <input name="purchase_price[]" value="<?php echo $val['purchase_price']; ?>" type="number" data-id="<?php echo $val['id']; ?>" class="form-control edit_purchase_price" />
    </div>
    <div class="col-lg-3">
      <label>Nosh Price </label>
      <input name="nosh_price[]" value="<?php echo $val['nosh_price']; ?>" type="number" class="form-control edit_nosh_price_<?php echo $val['id']; ?>" />
    </div>
  </div>
  <?php } ?>
  <button type="submit" class="btn btn-primary right_side">Submit</button>
</form>

如您所见，我使用 php 显示表单中的值，当我显示表单时，因为所有行都具有与下面相同的白色背景，这很尴尬：

我正在尝试为表单提供 2 种背景颜色，例如在第一行中所有输入背景颜色将显示一种颜色，第二行所有输入背景将显示不同颜色，并且每行都将继续显示。我做了以下CSS：

.form-control:nth-child(2n+1) {
  background-color: grey;
}

但这没有显示颜色，谁能告诉我我在这里做错了什么。提前致谢

Answer 1

:nth-child(2n+1) 部分代码将适用于与兄弟姐妹处于同一级别的form-control 类。在同一级别上没有其他 form-control 类作为同级。他们住在不同的柱子里。这就是为什么 2n+1 在它自己的关卡中找不到第三个form-control 的原因。所以，基本上你必须将col-lg-3 类定位为:nth-child(2n+1)。应该像这样工作-

.col-lg-3:nth-child(2n+1) {
    background-color: grey;
}

如果您想在每列的基础上设置不同的样式，那么您将选择每隔一列，然后选择最终的 form-control 类。

您可以在这里直观地看到它-https://css-tricks.com/examples/nth-child-tester/

编辑： 进一步澄清，这里是在这种情况下应该工作的代码，上面的解释与选择器的一点点变化有关-

.row:nth-child(2n+1) .form-control {
    background-color: #000;
}

Answer 2

你必须给 class row 而不是 form-control

.row:nth-child(2n+1){
background: grey;
}