Управление цветом кнопки (ссылка) в CSS

Если есть малина, которая контролирует несколько электронных устройств. У меня также есть веб-страница, которая показывает состояние устройств
Есть 3 состояния кнопка может иметь «в использовании» (оранжевый) «Бесплатно» (Зеленый) » и » вне » (красный)

стиль CSS

a:link {
    border:2px solid #456879;
    border-radius:10px;
    background-color: orange;
    width: 200px;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

a:link.uit{
    background-color: green;    
    }
a:link.aan{
    background-color: orange;   
    }
a:link.noi{                         <!--- noi= device Not In Use  -->
    background-color: red;  
    }

В моем python webserver я создаю страницу, которая содержит следующие части
(python создание этих HTML зависит от состояния устройства
HTML

<!---- when off
    <div>
       <a href="#" class="uit">Relax <br>Stopped: 15:22</a>
    </div>

<!---- when on
    <div>
       <a href="#" class="aan">Relax <br>Started: 15:22</a>
    </div>

<!--- when not in use 
    <div>
       <a href="#" class="noi">Relax <br>Out</a>
    </div>

Проблема в том, что когда я генерирую Relax
Out, цвет остается оранжевым, в то время как я ожидаю, что он изменится на красный

1 ответ

  1. Решение состоит в том, чтобы удалить нечетный комментарий

    <!--- noi= device Not In Use  -->
    

    из кода CSS.