Question

我正在使用复选框类型编码，我想这样做，以便对于特定选项，我能够点击它，它变成蓝色，而对于其他选项，我可以点击它，它将变为红色或绿色。我已经找到了一种方法来实现这一点，如CSS中所示，但我认为我必须继续为每种类型的标签编写代码。所以我想知道是否有更有效的方法来做到这一点？谢谢。这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS 'starts with' attribute selector（^=）来选择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;
}

Answer 2

首先，您不必重复第一个color中的font-weight和input[type="checkbox"]:checked + label样式。

一个选项是为不同类型的标签设置类，例如：

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

input[type="checkbox"]:checked + .blue {
  background: blue;
}

input[type="checkbox"]:checked + .red {
  background: red;
}

...

然后你的HTML：

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

进一步优化需要一些CSS预处理器，例如SASS。

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

  + .blue {
    background: blue;
  }

  ...
}

Answer 3

    label { color: red; }
    label span { color: green; }

<label> Label <span>Text with other color</span> </label>

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

3 个答案: