如何使用CSS通过标签ID更改标签颜色？

Question

我想知道是否有可能通过 CSS 来根据标签内的字符串更改 label 属性。例如，我想按照每周的工作日来更改它们自己的颜色：星期一 = 黄色，星期二 = 粉色……星期天 = 红色。

这是 label 属性切换器。我希望它能够模仿这种方式。

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

- Wilf

---

什么意思？通过id选择DOM节点？我们可以有HTML吗？ - Cohars

Answer 1

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

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

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

使用id：

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

使用数据选择器：

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

使用类：

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

- Mohamad

---

这就是我在等待的。data-day是否将CSS应用于label标签内部的内容？从您的示例中，它是否应用于<label>monday</label>？？？ - Wilf

不，这需要标签具有名为day且值为monday的数据属性。例如，<label data-day="monday">label text</label>。 - Mohamad

好的，我明白了。所以我不需要对我的“label”进行任何进一步的编码。我已经在其中有“for”。然后我必须编写CSS来应用其属性，使用“input[type=checkbox]:checked + label[for="xxx"]”。因为它总是存在-“for”属性。 - Wilf

Answer 2

你其实已经回答了自己的问题... 如果这些标签有ID属性....

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

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

- Stuart

---

非常感谢，我真是太蠢了哈哈哈。在这里提问之前我应该先考虑一下:P - Wilf

哈！ ;) 不要忘记，使用id时不需要像那样级联下去，只需要 #Monday 就可以了 :) - Stuart

那是一个过于复杂的选择器。选择器 :checked + #Monday 就足够了。 - chharvey

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。

- LOTUSMS