更改表格背景和文本颜色

Question

我正在使用在网上找到的代码示例来帮助我在项目中设置表格。我想知道如何更改白色行的背景颜色？我希望它们与我在其他产品上使用的深蓝色相同。我也没有找到将文本颜色更改为白色的方法，以便可以在深蓝色上看到它......我错过了什么？

.styled-tableBlue {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-tableBlue thead tr {
  background-color: #324655;
  color: #ffffff;
  text-align: left;
}

.styled-tableBlue th,
.styled-tableBlue td {
  padding: 12px 15px;
}

.styled-tableBlue tbody tr {
  border-bottom: 1px solid #152027;
}

.styled-tableBlue tbody tr:nth-of-type(even) {
  background-color: #152027;
}

.styled-tableBlue tbody tr:last-of-type {
  border-bottom: 2px solid #152027;
}

.styled-tableBlue tbody tr.active-row {
  font-weight: bold;
  color: #ff6600;
}

<table class="styled-tableBlue">
  <thead>
    <tr>
      <th>Installers</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><b>&nbsp;Download</b></td>
      <td><b>&nbsp;Installer Name</b></td>
    </tr>
    <tr>
      <td><img src="images/downloadArrow.png" width="20" height="20" alt="Download" />&nbsp;</td>
      <td>6000</td>
    </tr>
    <tr class="active-row">
      <td>Download Btn Here</td>
      <td>5150</td>
    </tr>
    <tr>
      <td>Download Btn Here</td>
      <td>7000</td>
    </tr>
    <tr>
      <td>Download Btn Here</td>
      <td>7000</td>
    </tr>
    <tr>
      <td>Download Btn Here</td>
      <td>7000</td>
    </tr>
    <tr>
      <td>Download Btn Here</td>
      <td>7000</td>
    </tr>
    <!-- and so on... -->
  </tbody>
</table>

Answer 1

由于这条规则，白色行没有蓝色背景颜色：

.styled-tableBlue tbody tr:nth-of-type(even) {
    background-color: #152027;
}

:nth-of-type(even)

表示所有偶数行都具有该颜色。删除它会使它们全部变成蓝色。将颜色属性设置为白色也会使它们的文本变成白色。

您可以将以上内容替换为：

.styled-tableBlue tbody tr {
    background-color: #152027;
    color: white;
}

您可以使用

#ffffff

更改“白色”文本以保持一致或缩短版本

#fff

。