Question

我正在尝试在表格行上应用简单的交替颜色，但下面的代码不起作用。

页面的正文，标题和背景颜色都可以正常工作。和悬停功能一样。我确信我做的事情很简单，但我看不出问题。

<!DOCTYPE html>
<html>
<head>
<title>This is my Test Table</title>
<style type="text/css">
  body {
    font-family: Calibri, Arial, sans-serif;
    color: #fff;
    background-color: #111;
  }

  table.chris {
    width: 500px;
  }

  .chris thead {
    color: #FFFFFF
  }

  .chris tr:nth-child(even) {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
  }
  .chris tr:nth-child(odd) {
    background-color: #c3e6e5;
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 50%;
  }

  .chris tr:hover {
    background-color: #c3e6e5;
  }

</style>
</head>
<body>
<h1>Income / Outgoings</h1>
<table class="chris">
  <thead>
    <!-- Define table header row-->
    <th>Test</th>
    <th>Test2</th>
  </thead>
  <tbody>
    <!-- Define table contents-->
    <tr>
      <!-- Define table data row-->
      <td>1</td>
      <td>6</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>2</td>
      <td>5</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>4</td>
      <td>3</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>5</td>
      <td>2</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>6</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 1

您要添加到.even元素的.odd和<tr>未选择任何内容，因为<tr>个元素都没有偶数或奇数作为类。您需要使用:nth-of-type(odd)之类的内容来选择正确的<tr>元素。

body {
  font-family: Calibri, Arial, sans-serif;
  color: #fff;
  background-color: #111;
}
table.chris {
  width: 500px;
}
.chris thead {
  color: #FFFFFF
}
.chris tbody tr:nth-of-type(even) {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}
.chris tbody tr:nth-of-type(odd) {
  background-color: #c3e6e5;
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 50%;
}
.chris tr:hover {
  background-color: #c3e6e5;
}

<h1>Income / Outgoings</h1>
<table class="chris">
  <thead>
    <!-- Define table header row-->
    <th>Test</th>
    <th>Test2</th>
  </thead>
  <tbody>
    <!-- Define table contents-->
    <tr>
      <!-- Define table data row-->
      <td>1</td>
      <td>6</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>2</td>
      <td>5</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>4</td>
      <td>3</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>5</td>
      <td>2</td>
    </tr>
    <tr>
      <!-- Define table data row-->
      <td>6</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

Answer 2

更改：

.chris tr.even {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
}
.chris tr.odd {
    background-color: #c3e6e5;
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 50%;
}

分为：

.chris tr:nth-child(even) {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
}
.chris tr:nth-child(odd) {
    background-color: #c3e6e5;
    color: rgb(255,255,255);
    font-weight: bold;
    font-size: 50%;
}

这是因为您通过执行odd和even告诉CSS查找类tr.odd和tr.even，但您从未在HTML中声明它们，因此CSS跳过它们，这里的解决方案将获得您想要的方式，即使您添加更多行。

更多信息here

工作fiddle

希望这有帮助！

CSS备用表行

2 个答案: