html - 多类改变颜色

Question

我想在表格中使用多种文本颜色。所以我认为类是解决此问题的最佳方法，因为我想要具有相同颜色的多个元素。我只会用 HTML 和 CSS 显示我正在处理的表格。

这是我正在处理的表格:

table.neutral {
  border-style: solid;
  border-width: 5px;
  border-collapse: collapse;
  border-color: olive;
}
td.neutral {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #FF4040;
}
td.neutral.good {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #00A550);
}

<table class="neutral">
  <tr>
    <th colspan="2">Muscularity index</th>
  </tr>
  <tr>
    <td class="neutral">-3</td>
    <td class="neutral">Very fat, Muscles don't show even if they are massive</td>
  </tr>
  <tr>
    <td class="neutral">-2</td>
    <td class="neutral">Fat, Massive muscles show</td>
  </tr>
  <tr>
    <td class="neutral">-1</td>
    <td class="neutral">Slightly fat, Most muscles show but with less definition</td>
  </tr>
  <tr>
    <td class="neutral">0</td>
    <td class="neutral">Not fat or muscular, this is the average</td>
  </tr>
  <tr>
    <td class="neutral good">1</td>
    <td class="neutral">Slightly muscular, muscles start showing</td>
  </tr>
  <tr>
    <td class="neutral good">2</td>
    <td class="neutral">Muscular, most muscles show with some definition</td>
  </tr>
  <tr>
    <td class="neutral good">3</td>
    <td class="neutral">Very muscular, all muscles show with definition</td>
  </tr>
</table>
<caption>Table 2: Muscularity index</caption>

我尝试了一个空格没有点，没有空格或点，还有一个点，如 CSS 代码中所示。 1、2 和 3 应该是绿色的，对应的文字是珊瑚红色。那么为什么那些正数是珊瑚红色而不是它们应该是的绿色呢？后代选择器应该指定更多而不是根本不改变它。

Answer 1

您的 td.neutral.good 类的 color 属性上有一个 )。删除它，它将解决您的问题。

table.neutral {
  border-style: solid;
  border-width: 5px;
  border-collapse: collapse;
  border-color: olive;
}
td.neutral {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #FF4040;
}
td.neutral.good {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-color: olive;
  color: #00A550;
}

<table class="neutral">
  <tr>
    <th colspan="2">Muscularity index</th>
  </tr>
  <tr>
    <td class="neutral">-3</td>
    <td class="neutral">Very fat, Muscles don't show even if they are massive</td>
  </tr>
  <tr>
    <td class="neutral">-2</td>
    <td class="neutral">Fat, Massive muscles show</td>
  </tr>
  <tr>
    <td class="neutral">-1</td>
    <td class="neutral">Slightly fat, Most muscles show but with less definition</td>
  </tr>
  <tr>
    <td class="neutral">0</td>
    <td class="neutral">Not fat or muscular, this is the average</td>
  </tr>
  <tr>
    <td class="neutral good">1</td>
    <td class="neutral">Slightly muscular, muscles start showing</td>
  </tr>
  <tr>
    <td class="neutral good">2</td>
    <td class="neutral">Muscular, most muscles show with some definition</td>
  </tr>
  <tr>
    <td class="neutral good">3</td>
    <td class="neutral">Very muscular, all muscles show with definition</td>
  </tr>
</table>
<caption>Table 2: Muscularity index</caption>