Html 具有奇怪颜色行为链接的CSS表_Html_Css

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

html css

Html 具有奇怪颜色行为链接的CSS表,html,css,Html,Css,我有个问题。我正在尝试创建一个CSS表，其中包含交替的彩色行，如。但是，我希望表中的某些内容具有链接，并且我发现这些单元格的文本背景行为异常（即，将错误行的背景颜色用于一半行）。我对CSS很陌生，所以我可能犯了一个明显的错误。截图：和MWE代码： <html> <style type="text/css"> table.t2 { } .t2 th, .t2 td { padding: 4px 8px; background: #fb

我有个问题。我正在尝试创建一个CSS表，其中包含交替的彩色行，如。但是，我希望表中的某些内容具有链接，并且我发现这些单元格的文本背景行为异常（即，将错误行的背景颜色用于一半行）。我对CSS很陌生，所以我可能犯了一个明显的错误。截图：

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


表2.t2{
}
.t2 th、.t2 td{
填充：4px8px；
背景：#fbd7b4；
}
.t2 tbody tr:n个孩子（奇数）*:n个孩子（偶数），.t2 tbody tr:n个孩子（偶数）*:n个孩子（奇数）{
背景：#f3eddd；
} 
嘿
ABCD
双重的
-
中交DDD
中交DDD

任何帮助修复此问题都将不胜感激

我相信这就是你想要的

只需将a元素从着色中排除即可


表2.t2{
}
.t2 th、.t2 td{
填充：4px8px；
背景：#fbd7b4；
}
.t2 tbody tr:n个孩子（奇数）*:n个孩子（偶数），.t2 tbody tr:n个孩子（偶数）*:n个孩子（奇数）：非（a）{
背景：#f3eddd；
} 
嘿
ABCD
双重的
-
中交DDD
中交DDD

我相信这就是你想要的

只需将a元素从着色中排除即可


表2.t2{
}
.t2 th、.t2 td{
填充：4px8px；
背景：#fbd7b4；
}
.t2 tbody tr:n个孩子（奇数）*:n个孩子（偶数），.t2 tbody tr:n个孩子（偶数）*:n个孩子（奇数）：非（a）{
背景：#f3eddd；
} 
嘿
ABCD
双重的
-
中交DDD
中交DDD

您必须指定

元素的背景色。大概是这样的：

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

您必须指定

元素的背景色。大概是这样的：

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

您已更改TD的bg颜色，但未更改锚定

-您需要添加另一组类似的样式：

.t2 tbody tr:n个子项（奇数）*:n个子项（偶数）a

您已经更改了TD的bg颜色，但没有更改锚定

-您需要添加另一组类似的样式：

。t2 tbody tr:n个孩子（奇数）*:n个孩子（偶数）a

我认为OP希望其他每个单元格都可以交替颜色（如棋盘图案）完美！非常感谢。我认为OP希望每个其他单元格都能交替颜色（如棋盘图案）完美无瑕！非常感谢。