前幾天就遇到過這樣的問題,明明我用的是('tr :even').css('background','#ccc')想改變表格中行的背景色,反復試了還是沒改變。還問了度娘還是沒找到原因所在(當時問題描述的方向錯了)。今天再次遇到了這個問題,原來是我習慣性地把空格給加上了。
加了空格的效果是這樣的:

去掉空格后得到了想要的樣子:

以上兩種結果可以看出,加了空格后選中的是其子元素,沒加空格的才是指向它自身(暫時只在帶冒號':'的選擇器中遇到這個問題),一定要注意空格的問題,注意養成良好的編程習慣。
以下是代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格變色</title>
<style type="text/css">
tr{
margin-left: 10px;
}
td{
width: 100px;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table td {
text-align: center;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tr:even').css('background', '#F6E2E2');
});
</script>
</head>
<body>
<table style="border:1px solid #000;padding: 5px;">
<thead style="border-bottom:2px solid #000;margin-left: 4px; ">
<tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>浙江寧波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南長沙</td>
</tr>
<tr>
<td>趙六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>Maxman</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
