Question

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

这是标签属性转换器。我希望它有办法模仿这个。

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

要记住几件重要的事情：

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 {
}

Answer 2

您回答了自己的问题......如果标签有ID属性....

input[type=checkbox]:checked + label#Monday

<label id="Monday">Monday<label>

Answer 3

最简单的方法是每天分配一个ID（不管你不需要它们）并执行以下操作：

#id1:checked + label {
  color: red;
}
#id2:checked + label {
  color: blue;
}
#id3:checked + label {
  color: orange;
}
#id4:checked + label {
  color: purple;
}
#id5:checked + label {
  color: green;
}

这是一个有效的DEMO

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

3 个答案: