如何在没有 js 的情况下使用 html 和 CSS 更改标签颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33511556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change label color with html and CSS without js?
提问by doglover123
I am using checkbox type coding and I would like to make it so that for specific options, I am able to click it and it turns blue, and for other options, I can click it and it will turn red or green. I have found a way to do this, as shown in the CSS, but I figured I would have to keep writing code for each type of label. So I was wondering if there was a much more efficient way of doing this? Thanks. Here is the code:
我正在使用复选框类型编码，我想这样做，以便对于特定选项，我可以单击它，它会变成蓝色，对于其他选项，我可以单击它，它会变成红色或绿色。我找到了一种方法来做到这一点，如 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>采纳答案by collinksmith
You can use the CSS 'starts with' attribute selector(^=) to select all labels with a forattribute that starts with 'red', 'green', etc.
您可以使用 CSS 的“开头为”属性选择器( ^=) 来选择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;
}
回答by Will
For one, you don't have to repeat the colorand font-weightstyles from the first input[type="checkbox"]:checked + label.
首先，您不必重复第一个color和font-weight样式input[type="checkbox"]:checked + label。
An option would be to have classes for the different types of labels, for example:
一种选择是为不同类型的标签设置类，例如：
input[type="checkbox"]:checked + label {
color: #fff;
font-weight: bold;
}
input[type="checkbox"]:checked + .blue {
background: blue;
}
input[type="checkbox"]:checked + .red {
background: red;
}
...
Then your HTML:
然后你的 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>
Further optimization would require some CSS preprocessor, such as SASS.
进一步的优化需要一些 CSS 预处理器，例如SASS。
input[type="checkbox"]:checked {
+ label {
color: #fff;
font-weight: bold;
}
+ .blue {
background: blue;
}
...
}
