Question

我想用每行不同颜色的每一行输入文本字段设置样式，遵循以下模式：odd：even伪类。问题是，n号子（N）不能为我提供正确的结果。它宁可使所有输入字段具有相同的颜色。请指教！

 input[type=text]:nth-last-child(even){
width:150px;
display:block;
background:#ccc;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input[type=text]:nth-last-child(odd){
width:150px;
display:block;
background:#0F9;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

和HTML代码：

<form name="form1" method="post" action="" >
<table width="500" border="0" cellspacing="1" cellpadding="0">


<?php while ($rows = mysql_fetch_array($result)) : ?>

<tr>
    <td align="center">
        <?php
            $id[] = $rows['id'];
            echo $rows['id'];
        ?>
        <input type="hidden" name="id[]" value="<?php echo $rows['id']; ?>" />
    </td>
    <td align="center">
        <input name="name[]" type="text" id="name"  value="<?php echo $rows['name']; ?>" />
    </td>
    <td align="center"> 
        <input name="lastname[]" type="text" id="lastname" value="<?php echo $rows['lastname']; ?>" />
    </td>
    <td align="center">
        <input name="email[]" type="text" id="email" value="<?php echo $rows['email']; ?>" />
    </td>
</tr>

<?php endwhile; ?>

<tr>
<td colspan="4" align="center"><input type="submit" name="submit1" value="ΕΝΗΜΕΡΩΣΗ"></td>
</tr>

</table>
</td>
</tr>

</table>
</form>

Answer 1

在:nth-child(even)上设置<td>，而不是<input>。在您的代码中，<input>始终是第一个孩子，因为它包含在<td>内。

示例：

td:nth-last-child(even) input[type=text]{
   background:#ccc;
}

小提琴： http://jsfiddle.net/sfpK8/3/

Answer 2

您的输入位于<td>，因此input[type=text]:nth-last-child(even)只会在一个输入上触发一次。以这种方式做到：

td:nth-child(even) input[type=text] {
   //your styles for even
}

此外，您不必将样式应用于奇数元素，只需为所有输入创建默认样式，然后为偶数添加样式：

input[type=text] {
   //style#1
}
td:nth-child(even) input[type=text] {
   //style#2
}

仅样式化具有不同颜色的表行的输入文本字段

2 个答案: