Question

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

所以这是我正在处理的表格：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

多个类来改变颜色

1 个答案: