Html 为什么我的css表格样式是混合的

我不能理解我在这里做错了什么。我的两个表格的css样式应该是分开的，但是“rcorners1”表格似乎受到“water_table”设置的影响

我有两个表，第一个表是css

table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {background-color: #ffffff;}
table.water_table th, td {
    padding: 15px;
    text-align: left;
} 

我的第一张桌子看起来像

<table border="0" align="center" class="water_table" id="water_table">

<table width="100%" border="0"  class="rcorners1" id="rcorners1">

我的第二张桌子看起来像

<table border="0" align="center" class="water_table" id="water_table">

<table width="100%" border="0"  class="rcorners1" id="rcorners1">

---

我不知道这是否是正确的解决方案。为了纠正这个问题，我从css样式文件中删除了“water_table”，并在“water_table”出现之前在html中创建了一个样式块

table.water_table tr:n个孩子（偶数）{背景色：#f2f2}
table.water_table tr:hover{背景色：#f5}
表1.水{
背景色：#ffffff；
/*颜色：白色*/
}
表1.水表th，td{
填充：15px；
文本对齐：左对齐；
}

我不知道这是否是正确的解决方案。为了纠正这个问题，我从css样式文件中删除了“water_table”，并在“water_table”出现之前在html中创建了一个样式块

table.water_table tr:n个孩子（偶数）{背景色：#f2f2}
table.water_table tr:hover{背景色：#f5}
表1.水{
背景色：#ffffff；
/*颜色：白色*/
}
表1.水表th，td{
填充：15px；
文本对齐：左对齐；
}

通常，您不希望在HTML中放置内联样式块-如果要这样做，它应该位于文档的开头，而不是正文中

但是，如果移动样式为您解决了问题，这意味着css文件中还有其他内容覆盖了所需的样式

---

通常，您可以在浏览器检查器中看到与图元关联的所有样式。如果您要检查元素，我打赌您会看到一些从CSS文件中划掉的附加样式。

通常您不希望在HTML中放置内联样式块-如果要这样做，它应该位于文档的开头，而不是正文中

但是，如果移动样式为您解决了问题，这意味着css文件中还有其他内容覆盖了所需的样式

通常，您可以在浏览器检查器中看到与图元关联的所有样式。如果你检查你的元素，我打赌你会看到一些额外的样式从你的CSS文件中划掉