如何使用css通过其id更改标签颜色？

Question

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

这是标签属性切换器。我希望它可以有一种模仿这一点的方式。

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，请建议。

Answer 1

需要记住的一些重要事项：

1. CSS中的选择器+称为相邻选择器。它仅选择紧邻前一个元素之前的元素。因此，您的标签始终必须遵循复选框才能生效
2. 在CSS中，anid不能以数字开头。

有很多方法可以做到这一点，例如使用 id、数据属性或类。

使用 ID：

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

使用数据选择器：

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

使用类：

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