如何仅用css更改选中单选按钮的标签颜色

Question

当选中特定的单选按钮时，我想更改标签的颜色，但是我做不到，这是我的代码。

html

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>

css

.civil-sub-law-type:checked ~ .civil-sub-law-type-label {
  background-color: red;
}

请建议我该怎么做

Answer 1

首先，您必须明确说明每个输入标签对，通常是通过指定的id。

其次，您必须使用~ *，而不仅仅是~，因为标签不是复选框的同级元素，而是这些兄弟姐妹的后代。

​

#arb:checked ~ * label[for="arb"] {
  background-color: red;
}

#landacq:checked ~ * label[for="landacq"] {
  background-color: red;
}

#comcourt:checked ~ * label[for="comcourt"] {
  background-color: red;
}

#others:checked ~ * label[for="others"] {
  background-color: red;
}

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>

​

这是一种不同的、更可伸缩的方法，可以计算元素，而不是使用ids。还将选择器分组在一起，因为它们都使用相同的颜色。

​

.civil-sub-law-type:nth-child(1):checked ~ 
    * .civil-sub-law-type-list:nth-child(1) > label,
.civil-sub-law-type:nth-child(2):checked ~ 
    * .civil-sub-law-type-list:nth-child(2) > label,
.civil-sub-law-type:nth-child(3):checked ~ 
    * .civil-sub-law-type-list:nth-child(3) > label,
.civil-sub-law-type:nth-child(4):checked ~ 
    * .civil-sub-law-type-list:nth-child(4) > label {
  background-color: red;
}

<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input class="civil-sub-law-type" type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article class="civil-sub-law-type-nav">
    <ul class="civil-sub-law-type-ul">
        <li class="civil-sub-law-type-list">
            <label for="arb" class="civil-sub-law-type-label">Arbitration Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="landacq" class="civil-sub-law-type-label">Land Acquisation Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="comcourt" class="civil-sub-law-type-label">Comercial Court Cases</label>
        </li>
        <li class="civil-sub-law-type-list">
            <label for="others" class="civil-sub-law-type-label">Others</label>
        </li>
    </ul>
</article>

​

Answer 2

您的标签和输入应该相邻。

​

.radio:checked + label {
  color: red;
}

<ul>
  <li>
    <input class="radio" name="test" type="radio" />
    <label>
      Test Label
    </label>
  </li>
  <li>
    <input class="radio" name="test" type="radio" />
    <label>
      Test Label 2
    </label>
  </li>
</ul>

​