1

我有一个包含字段集的表单。字段集包含 div，对相关的表单项（标签 + 输入）进行分组。

它看起来像这样：

<fieldset> 
    <div class="formitem">
        <label for="age">
            age
        </label>
        <input type="text" name="[age]">
    </div>
    <div class="formitem">
        <label for="birthday">
            birthday
        </label><br>
        <input type="text" name="[birthday]">
    </div>
    <div class="formitem">
        <label for="size">
            size
        </label><br>
        <input type="text" name="[size]">
    </div>
</fieldset>

我正在使用这个 CSS 为每个奇数（第一个、第三个等）div .formitem 添加一个深绿色条纹：

fieldset .formitem:nth-child(odd) {
     background: #a7cc87;
}

但这会在整个文档中为每个奇数编号的 .formitem 添加背景颜色，而忽略分隔的字段集。

我想要的是每个字段集的奇数/偶数计数再次开始，因此如果字段集 1 以奇数结束，则字段集 2 中的第一项仍将获得奇数样式。

有什么办法可以用 CSS 实现这一点，还是我需要使用 JQuery？

4

0 回答 0