jQuery选择器中的空格问题

   前几天就遇到过这样的问题，明明我用的是('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>

 

posted @ 2017-05-08 17:22  Nicholasyi  阅读(3152)  评论(0)  编辑  收藏  举报