Question

我正在尝试将tr：nth-child（偶数）放在表标记中。我不希望它是全球性的。

示例：

<table style= "{tr:nth-child(even) = background-color: #c2ddf2;}"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Answer 1

不能在style属性中设置伪类。相反，你可以给表一个类，并做这样的事情

＆＃13;

.table1 tr:nth-child(even) { background-color: #c2ddf2;}

＆＃13;

<table class="table1" > 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

＆＃13;

Answer 2

只需在表格中添加一个类就可以了！

.special tr:nth-child(even) {
background-color: #c2ddf2;
}

<table class="special"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>
<hr>
<table class="notspecial"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

Answer 3

您不能使用内联css设置伪元素的样式。这是你如何做到的。

＆＃13;

.table tr:nth-child(even){
  background: #ccc;
}

＆＃13;

<table class="table"> 
   <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
   <tr><th>this</th><th>should</th><th>be different</th><th>colors</th></tr>
   <tr><th>this should</th><th>be same</th><th>colors as</th><th>first row</th></tr>
</table>

＆＃13;

将tr：nth-​​child（偶数）放在表标记中

3 个答案:

将tr：nth-child（偶数）放在表标记中