html - 如何不将样式应用于表格元素

Question

我在应用于表格的 css 文件中具有以下样式。现在我有第二张 table ，我不希望第二张 table 有这种特定的样式。如何防止我的第二个表获得此样式？

这是CSS:

tr:nth-child(even) {
	 background: #f6f6f6;
}

tr > i:nth-child(even), tr > i:nth-child(odd) {
	background: transparent;
	
}
 tr:nth-child(odd),  {
	 background: #FFF;
}

<table id="firstTable" class="firstTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<table id="secondTable" class="secondTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

"#firstTable"将指示您的浏览器仅在 id="firstTable"的表上应用此 css

#firstTable tr:nth-child(even) {
background: #f6f6f6;
}

#firstTable tr > i:nth-child(even), tr > i:nth-child(odd) {
background: transparent;

}
#firstTable tr:nth-child(odd),  {
background: #FFF;
}

<table id="firstTable" class="firstTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<table id="secondTable" class="secondTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>