Question

＆＃13;

input:checked ~ label {
    color: red;
}

＆＃13;

<input type='radio' name='color'>
<label>black</label>
<input type='radio' name='color'>
<label>green</label>
<input type='radio' name='color'>
<label>yellow</label>
<input type='radio' name='color'>
<label>red</label>
<input type='radio' name='color'>
<label>blue</label>
<input type='radio' name='color'>
<label>gray</label>
<input type='radio' name='color'>
<label>azure</label>
<input type='radio' name='color'>
<label>white</label>

＆＃13;

如何使用labels改变color: red的着色方向，现在，当我点击black时，所有内容都会获得color: red，但我想要反之，所以当我点击white时，所有内容都会获得color: red

Answer 1

你可以考虑像这样的flexbox和逆序：

＆＃13;

div {
  display: flex;
  flex-direction: row-reverse;
}

input:checked~label {
  color: red;
}

input:first-child {
  margin-right:auto;
}

＆＃13;

<div>
  <input type='radio' name='color'>
  <label>white</label>
  <input type='radio' name='color'>
  <label>azure</label>
  <input type='radio' name='color'>
  <label>gray</label>
  <input type='radio' name='color'>
  <label>blue</label>
  <input type='radio' name='color'>
  <label>red</label>
  <input type='radio' name='color'>
  <label>yellow</label>
  <input type='radio' name='color'>
  <label>green</label>
  <input type='radio' name='color'>
  <label>black</label>
</div>

＆＃13;

Answer 2

Flexbox可以帮助解决这个问题。

还有其他方法，但这里有一个。

input:checked ~ label {
    color: red;
}

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

<div class="container">
  <label>white</label>
  <input type='radio' name='color'>
  <label>azure</label>
  <input type='radio' name='color'>
  <label>gray</label>
  <input type='radio' name='color'>
  <label>blue</label>
  <input type='radio' name='color'>
  <label>red</label>
  <input type='radio' name='color'>
  <label>yellow</label>
  <input type='radio' name='color'>
  <label>green</label>
  <input type='radio' name='color'>
  <label>black</label>
  <input type='radio' name='color'>
</div>

Answer 3

你可以在输入和标签中添加float：right 例如。输入，标签{float：right;}

颠倒向sibilings施加颜色的方向

3 个答案: