html - 如何在没有js的情况下使用html和CSS更改标签颜色？

Question

我正在使用复选框类型编码，我想针对特定选项进行设置，点击它后它会变成蓝色，而对于其他选项，我可以点击它然后它会变成红色或绿色。我已经找到一种方法来执行此操作，如 CSS 中所示，但我认为我必须继续为每种类型的标签编写代码。所以我想知道是否有更有效的方法来做到这一点？谢谢。这是代码:

input[type="checkbox"] {
	display: none;
}

label {
	cursor: pointer;
	color: #555;
	display: block;
	padding: 10px;
	margin: 3px;
}

input[type="checkbox"]:checked + label {
	color: #ffffff;
	font-weight: bold;
    background: blue;
}

input[type="checkbox"]:checked + label[for=red1] {
	color: #ffffff;
	font-weight: bold;
    background: red;
}

input[type="checkbox"]:checked + label[for=red2] {
	color: #ffffff;
	font-weight: bold;
    background: red;
}

input[type="checkbox"]:checked + label[for=green1] {
	color: #ffffff;
	font-weight: bold;
    background: green;
}

<div><input id="blue1" type="checkbox" /><label for="blue1">1 blue</label></div>
<div><input id="blue2" type="checkbox" /><label for="blue2">2 blue</label></div>
<div><input id="blue3" type="checkbox" /><label for="blue3">3 blue</label></div>
<div><input id="blue4" type="checkbox" /><label for="blue4">4 blue</label></div>
<div><input id="red1" type="checkbox" /><label for="red1">1 red</label></div>
<div><input id="red2" type="checkbox" /><label for="red2">2 red</label></div>
<div><input id="green1" type="checkbox" /><label for="green1">1 green</label></div>

Answer 1

您可以使用 CSS 'starts with' attribute selector (^=) 以选择具有以“red”、“green”等开头的 for 属性的所有标签

input[type="checkbox"] {
    display: none;
}

label {
    cursor: pointer;
    color: #555;
    display: block;
    padding: 10px;
    margin: 3px;
}

input[type="checkbox"]:checked + label {
    color: #ffffff;
    font-weight: bold;
    background: blue;
}

input[type="checkbox"]:checked + label[for^=red] {
    color: #ffffff;
    font-weight: bold;
    background: red;
}

input[type="checkbox"]:checked + label[for^=green] {
    color: #ffffff;
    font-weight: bold;
    background: green;
}