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

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

这里是CSS：

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

 
tr > i:nth-child(even), tr > i:nth-child(odd) { 
 
\t background: transparent; 
 
\t 
 
} 
 
tr:nth-child(odd), { 
 
\t 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>

来源

2017-02-28 Harriet

“#firstTable” 会指示你的浏览器到应用此CSS只能在表ID = “firstTable”

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

来源

2017-02-28 13:08:47

所有你需要的仅仅是指定的类名到您选择

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

 
.firstTable tr > i:nth-child(even), .firstTable tr > i:nth-child(odd) { 
 
\t background: transparent; 
 
\t 
 
} 
 
.firstTable tr:nth-child(odd), { 
 
\t 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>

来源

2017-02-28 13:09:25 antyrat

你为什么不使一个CSS的HTML元素类，我的意思是你应该改变的CSS文件，并指定类的CSS元素。

来源

2017-02-28 13:09:37 LakiGeri

如果你想要一个元素不是使用的风格，尝试:not selector在CSS3。

在你的情况下，table:not(.secondTable)将符合你的需要。

来源

2017-02-28 13:28:10 abuccts

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

回答

相关问题