html – 如何用css的id更改标签颜色？

我想知道是否有任何可能的方法根据其标签内的字符串用css更改label属性.示例我喜欢用自己的颜色更改工作日：Mon =黄色,Tue =粉红色……太阳=红色.

这是label属性toggler.我希望它有办法模仿这个.

input[type=checkBox]:checked + label {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

所以,我希望代码可以用这样的标签：

input[type=checkBox]:checked + label[id=1] {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

我不擅长CSS,请建议.

解决方法

需要记住的几件重要事项：

> CSS中的选择器称为相邻选择器.它仅选择前一个元素前面的元素.因此,您的标签必须按照复选框才能生效
>在CSS中,id不能以数字开头.

您可以通过多种方式执行此操作,例如使用id,数据属性或类.

使用id：

input[type=checkBox]:checked + label#monday {
}

使用数据选择器：

input[type=checkBox]:checked + label[data-day="monday"] {
}

使用calss：

input[type=checkBox]:checked + label.monday {
}