Question

我有一个问题。我试图制作一个包含交替彩色行的CSS表格，例如this。但是，我希望表中的某些内容具有链接，并且我发现这些单元格的文本背景表现得很奇怪（即，对于一半的行采用错误行的背景颜色）。我对CSS很陌生，所以我可能犯了一个明显的错误。截图：

Funky link bg coloration

和MWE代码：

<html>

  <style type="text/css">

  table.t2 {
  }
  .t2 th, .t2 td {
    padding: 4px 8px;
    background: #fbd7b4;
  }

  .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) {
    background: #f3eddd;
  } 
</style>

  <table class="t2" summary="blah">
    <caption>hey </caption>

    <thead>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tfoot>
<tr><th colspan="4">double </th></tr>
</tfoot>-
<tbody>
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr>
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr>

</tbody>
</table>

</body>
</html>

非常感谢任何帮助解决这个问题！

Answer 1

我相信这就是你想要的......

只需从着色中排除元素。

<html>

  <style type="text/css">

  table.t2 {
  }
  .t2 th, .t2 td {
    padding: 4px 8px;
    background: #fbd7b4;
  }

  .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd):not(a) {
    background: #f3eddd;
  } 
</style>

  <table class="t2" summary="blah">
    <caption>hey </caption>

    <thead>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tfoot>
<tr><th colspan="4">double </th></tr>
</tfoot>-
<tbody>
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr>
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr>

</tbody>
</table>

</body>
</html>

Answer 2

您必须指定<a>元素的背景颜色。像这样：

  .t2 th, .t2 td, .t2 td a, .t2 td a {
    padding: 4px 8px;
    background: #fbd7b4;
  }

  .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) {
    background: #f3eddd;
  } 

  .t2 tbody tr:nth-child(odd) *:nth-child(even) a, .t2 tbody tr:nth-child(even) *:nth-child(odd) a{
    background: #f3eddd;
  }

带有奇怪颜色行为链接的CSS表

2 个答案: