如何用css通过id改变标签颜色?

I wonder if there's any possible way to change the label property with css according to the string inside its tag. Example I like to change the week day with it's own color : Mon = yellow, Tue = Pink ... Sun = red.

我想知道是否有可能通过css根据标签内的字符串来更改标签属性。我喜欢用它自己的颜色来改变工作日:Mon =黄色，Tue =粉色…太阳=红。

This is the label property toggler. I wish it could have a way of mimic this.

这是标签属性。我希望它能有一种模仿的方式。

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

So, I expect the code to do with the label something like this:

所以，我希望代码和标签的关系是这样的:

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

I'm not good at css, please suggest.

我不擅长css，请建议。

3 个解决方案

#1

A couple of important things to remember:

有几件重要的事情要记住:

The + selector in CSS is called the adjacent selector. It selects only the element immediately preceded by the former element. So your label always has to follow the checkbox for it to take effect
CSS中的+选择器称为邻边选择器。它只选择前一个元素之前的元素。所以标签必须遵循复选框才能生效
In CSS, an id can not start with a number.
在CSS中，id不能以数字开头。

There are many ways you can do this, such as with an id, data attributes, or classes.

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

Using an id:

使用一个id:

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

Using a data selector:

使用数据选择器:

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

Using a calss:

使用一个属性:

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

#2

You kind of answered your own question... If the labels have an ID attribute....

你回答了你自己的问题……如果标签有一个ID属性....

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

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

#3

Easiest way to do it is assigning an ID to each day (not like you wont need them anyway) and do the following:

最简单的方法是为每天分配一个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;
}

Here is a working DEMO

这是一个可用的演示

#1