Question

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

这是css：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃34;＃firstTable＆＃34;将表明您的浏览器仅在id =＆＃34; firstTable＆＃34;

的表格上应用此css

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您只需要为选择器分配类名

.firstTable tr:nth-child(even) {
	 background: #f6f6f6;
}

.firstTable tr > i:nth-child(even), .firstTable 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>

Answer 3

如果您想要使用该样式的一个元素 NOT ，请在CSS3中尝试:not selector。

在您的情况下，table:not(.secondTable)符合您的需求。

Answer 4

为什么不为html类元素创建一个css，我的意思是你应该更改css文件，并为类指定css元素。

如何不对表元素应用样式

4 个答案: