我正在尝试用CSS设计一个表的样式。然而，即使我使用div或a，我也无法正确使用类。无论我对该类进行了什么尝试，它都不起作用，只是悬停不起作用。你建议我做什么？
<html>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: center;
padding: 8px;
border-right: 3px solid red;
}
.ellenon {
background-color: red;
border-radius: 10px;
}
.ellenon :hover {
background-color: green;
border-radius: 30px;
}
</style>
<body>
<p>Table</p>
<table style="width:100%" >
<tr>
<th >Condition</th>
<th>Value</th>
</tr>
<tr>
<td class="ellenon" style="text-align:center"> Humidity</td>
<td style="text-align:center">15%</td>
</tr>
<tr>
<td style="text-align:center">Temprature</td>
<td style="text-align:center">25 °C</td>
</tr>
</table>
</body>
</html>您在这里有一个额外的空间.ellenon :hover将其更改为.ellenon:hover修复了问题
<html>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: center;
padding: 8px;
border-right: 3px solid red;
}
.ellenon {
background-color: red;
border-radius: 10px;
}
.ellenon:hover {
background-color: green;
border-radius: 30px;
}
</style>
<body>
<p>Table</p>
<table style="width:100%" >
<tr>
<th >Condition</th>
<th>Value</th>
</tr>
<tr>
<td class="ellenon" style="text-align:center"> Humidity</td>
<td style="text-align:center">15%</td>
</tr>
<tr>
<td style="text-align:center">Temprature</td>
<td style="text-align:center">25 °C</td>
</tr>
</table>
</body>
</html>