Question

鉴于以下内容

<div class="item">
    <p class="itemClass"><input type="text" id="1" name="field1" /><p>
    <p class="itemClass"><input type="text" id="2" name="field2" /><p>
</div>
<div class="item">
    <p class="itemClass"><input type="text" id="3" name="field3" /><p>
    <p class="itemClass"><input type="text" id="4" name="field4" /><p>
</div>
<div class="item">
    <p class="itemClass"><input type="text" id="5" name="field5" /><p>
    <p class="itemClass"><input type="text" id="6" name="field6" /><p>
</div>
..............etc

我如何定位以使奇数字段的样式与偶数字段的格式不同。我想也许我可以将P标签替换为较少使用的h标签，如..

<div class="item">
    <h4 class="itemClass"><input type="text" id="5" name="field5" /><h4>
    <h5 class="itemClass"><input type="text" id="6" name="field6" /><h5>
</div>

但我不确定如何选择每个领域。目前我正在使用......

.itemclass input{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
padding: 1px 0px 1px 0px;
background:url(images/input-trans.png) repeat-x right center;
color: black;
border-color: white;
}

但显然适用于两个输入

THX

Answer 1

我同意longchiwen的观点，nth-child pseudoclass可能是支持CSS3的现代浏览器的最佳解决方案。

如果您想支持不理解此伪类的浏览器，那么防弹解决方案将为偶数项使用其他类：

<div class="item">
    <p class="itemClass"><input type="text" id="1" name="field1" /><p>
    <p class="itemClass even"><input type="text" id="2" name="field2" /><p>
</div>

如您所见，您可以为标记分配许多类（空格分隔）。

在CSS中你只需写：

.even input {
    background-color: #c0ffee
}

我还建议通过删除itemClass类并使用.item p代替.itemClass来美化代码。

Answer 2

您可以使用nth-child规则。见http://www.w3.org/Style/Examples/007/evenodd

如何自定义同一个类中的元素

2 个答案: