为 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 class 与兄弟姐妹生活在同一水平。同级没有其他form-controlclass兄弟。他们住在不同的柱子里。这就是为什么 2n+1 在它自己的层级中找不到第三个 form-control 的原因。所以，基本上你必须将 class col-lg-3 作为 :nth-child(2n+1) 的目标。这样应该可以-

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

这样你就可以选择每隔一列，然后选择最终的 form-control class 如果你想为每列设置不同的样式。

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

编辑：进一步说明，这里是在这种情况下应该工作的代码，上面的解释与选择器的一点点变化保持一致-

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

Answer 2

您必须给出 class 行而不是 form-control

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

为 html 提供两种背景颜色，css 无效

giving two background colors for html with css not working

html

css

forms

background

input