<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器的利用</title>
<style>
table{width:700px;margin:10px auto;border-collapse: collapse; background-color:#cccccc;border:1px #000
solid;text-align:center;font-weight: bolder;}
td,th{font-size: 14px;height: 20px;padding: 10px; border: #000 2px solid;color: red;}
td:nth-of-type(odd){background-color: #ffc;color: #60f;}
td:nth-of-type(even){background-color: #cf9; color:#00f;}
td,tr:hover{background-color: #3ff;}
</style>
</head>
<body>
<table>
<tr>
<th>图书</th>
<th>出版社</th>
<th>出版日期</th>
<th>价格</th>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>java程序设计</td>
<td>人民邮电出出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.6</td>
<td>54</td>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>java程序设计</td>
<td>人民邮电出出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.6</td>
<td>54</td>
</tr>
<tr>
<td>c++程序设计</td>
<td>清华大学出版社</td>
<td>2016.1</td>
<td>35</td>
</tr>
<tr>
<td>java程序设计</td>
<td>人民邮电出出版社</td>
<td>2017.6</td>
<td>43</td>
</tr>
<tr>
<td>HTML实战教程</td>
<td>清华大学出版社</td>
<td>2018.9</td>
<td>39</td>
</tr>
<tr>
<td>ASP.NET应用开发</td>
<td>机械工业出版社</td>
<td>2015.6</td>
<td>54</td>
</tr>
</table>
</body>
</html>
如图是楼主想要的效果，楼主的代码只能实现第一行的鼠标悬停，但是楼主想从第二行开始每行都有这个效果，怎么搞呢？是哪里不对吗
