为什么当鼠标悬浮在表格中时只有第一个th变色了，其余的th中内容不变色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>峰云家教网</title>
    <style>
        #index th:not(.sy){
            padding: 15px;
            width:80px;    
            /*除了“首页”不设置内边距和宽度*/
        }
        #index th:not(.fkxx,.sy){
            border-right: 2px #C4C8ED solid;
            /*除了“首页”和“反馈信息”不要右边框*/
        }
        .sy{
            padding: 15px 30px;
            background: linear-gradient(to top,#c4c8ed 40%,#99c);
            /*扩大“首页”的内边距，设置“首页”的背景色*/
        }
        #index th a{
            color:#fff;text-decoration: none;
            /*设置链接的颜色，去掉下划线*/
        }        
        #index th:hover{
            background: pink;        
        }
        #index tr th:not(.sy){
            background:linear-gradient(to bottom,#66c 40%,#99c);
            /*设置除了“首页”以外单元格的背景色*/
        }
        #body1{
            height: 30px;
            background-color: #99c;
            line-height: 2em;
            text-indent: 5px;
            width: 900px;
            margin-top: 10px;
        }
        .img li{
            display: inline-block;
            margin-right: 15px;
        }
        .img li span{
            margin: 38px;/*文字与图片对齐*/
        }
    </style>
</head>
<body>
    <nav>
    <table id="index" cellspacing="0"><!--去掉单元格边距-->
        <tr>
            <th class="sy"><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></th>
            <th><a href="#">请家教</a></th>
            <th><a href="#">做家教</a></th>
            <th><a href="#">教员库</a></th>
            <th><a href="#">学员库</a></th>
            <th><a href="#">会员中心</a></th>
            <th><a href="#">联系我们</a></th>
            <th class="fkxx"><a href="#">反馈信息</a></th>
        </tr>
    </table>
    </nav>
    <div id="body1">推荐教员</div>
    <div>
        <ul class="img">
        <li><img src="../images/images4/tutor.png" alt=""><br><span>陈教员</span></li>
        <li><img src="../images/images4/tutor.png" alt=""><br><span>李教员</span></li>
        <li><img src="../images/images4/tutor.png" alt=""><br><span>马教员</span></li>
        <li><img src="../images/images4/tutor.png" alt=""><br><span>黄教员</span></li>
        <li><img src="../images/images4/tutor.png" alt=""><br><span>田教员</span></li>
        <li><img src="../images/images4/tutor.png" alt=""><br><span>石教员</span></li>
        </ul>
    </div>
</body>
</html>

这是效果图：

img

是这个原因

#index tr th:not(.sy){
           background:linear-gradient(to bottom,#66c 40%,#99c);
           /*设置除了“首页”以外单元格的背景色*/
       }