0

我想按照 :odd :even 伪类的模式为每一行输入文本字段设置不同的颜色。问题是 nth-of-child(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>
4

2 回答 2

0

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

例子：

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

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

于 2013-10-24T13:23:09.347 回答
0

您的输入放置在 a 中<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
}
于 2013-10-24T13:27:18.697 回答