html - 在 CSS 中控制(链接)按钮的颜色

Question

如果有一个树莓派，它控制着几个电子设备。我还有一个显示设备状态的网页 按钮可以有 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 网络服务器中，我创建了一个包含以下部分的页面 (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 时，颜色保持橙色，而我预计它会变成红色

Answer 1

解决办法是去掉奇怪的评论

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

来自 CSS 代码。