Несколько классов для изменения цвета

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

У вас есть ) в вашем color атрибуте вашего класса td.neutral.good. Удалите его, и он решит вашу проблему.

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>