我有一个包含字段集的表单。字段集包含 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?