Html CSS:'+'；选择运算符不工作

单选按钮按应有的方式更改后，范围的背景色不会更改

为什么会这样？如何修复它

div{
保证金：0.75em 0；
}
.formgroup输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]，
标签{
颜色：棕色；
字体系列：Arial，无衬线；
字体大小：14px；
}
输入[type=“radio”]，
标签跨度{
显示：内联块；
宽度：19px；
高度：19px；
保证金：-1px4p0；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：50%；
边界半径：50%；
}
输入[type=“radio”]，
标签跨度{
背景颜色：棕色；
}
输入[type=“radio”]：选中+p+span{
背景颜色：橙色；
}
输入[type=“radio”]+span，
输入[type=“radio”]：选中+span{
-webkit过渡：背景色0.4s线性；
-o过渡：背景色0.4s线性；
-moz过渡：背景色0.4s线性；
过渡：背景色0.4s线性；
}

艺术家名录


Op1
凤凰社2
凤凰社3

您的问题是您的直接同级选择器

input[type="radio"]:checked + span {
     background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked + span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

使用下面的新查询进行更新。

您最好使用通用同级选择器

~

div{
保证金：0.75em 0；
}
.formgroup输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]，
标签{
颜色：棕色；
字体系列：Arial，无衬线；
字体大小：14px；
}
输入[type=“radio”]，
标签跨度{
显示：内联块；
宽度：19px；
高度：19px；
保证金：-1px4p0；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：50%；
边界半径：50%；
}
输入[type=“radio”]，
标签跨度{
背景颜色：棕色；
}
输入[type=“radio”]：选中~span{
背景颜色：橙色；
}
输入[type=“radio”]+span，
输入[type=“radio”]：选中范围{
-webkit过渡：背景色0.4s线性；
-o过渡：背景色0.4s线性；
-moz过渡：背景色0.4s线性；
过渡：背景色0.4s线性；
}

艺术家名录


Op1
凤凰社2
Op2.1
Op2.2
Op2.3

您的问题是您的直接同级选择器

input[type="radio"]:checked + span {
     background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked + span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

使用下面的新查询进行更新。

您最好使用通用同级选择器

~

div{
保证金：0.75em 0；
}
.formgroup输入[type=“radio”]{
显示：无；
}
输入[type=“radio”]，
标签{
颜色：棕色；
字体系列：Arial，无衬线；
字体大小：14px；
}
输入[type=“radio”]，
标签跨度{
显示：内联块；
宽度：19px；
高度：19px；
保证金：-1px4p0；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：50%；
边界半径：50%；
}
输入[type=“radio”]，
标签跨度{
背景颜色：棕色；
}
输入[type=“radio”]：选中~span{
背景颜色：橙色；
}
输入[type=“radio”]+span，
输入[type=“radio”]：选中范围{
-webkit过渡：背景色0.4s线性；
-o过渡：背景色0.4s线性；
-moz过渡：背景色0.4s线性；
过渡：背景色0.4s线性；
}

艺术家名录


Op1
凤凰社2
Op2.1
Op2.2
Op2.3

您的单选按钮组实际上并不是应该的样子。我建议你改变一下

<ul class="artistlist">
  <li class="artist cf">
    <div class="info">
      <label class="formgroup">
        <input type="radio" name = "op"><span></span>Op1
        <input type="radio" name = "op"><span></span>Op2
        <input type="radio" name = "op"><span></span>Op3
      </label>
    </div>
  </li>
</ul>

Op1
凤凰社2
凤凰社3

您的单选按钮组实际上并不是应该的样子。我建议你改变一下

<ul class="artistlist">
  <li class="artist cf">
    <div class="info">
      <label class="formgroup">
        <input type="radio" name = "op"><span></span>Op1
        <input type="radio" name = "op"><span></span>Op2
        <input type="radio" name = "op"><span></span>Op3
      </label>
    </div>
  </li>
</ul>

Op1
凤凰社2
凤凰社3

input

位于

标签内，因此它不是另一个标签的同级。旁注，您没有关闭您的节元素。
input
位于
标签内，因此它不是另一个标签的同级。旁注，您没有关闭您的节元素。它适用于一个元素。但是当我的无线电组中有多个跨距时，它总是选择第一个跨距。如果无线电组本身的结构发生了变化，所有无线电输入都具有相同的名称，该怎么办？这不是一个更简单的解决方案吗？是的，它将@MadhuGNadigIt用于一个元素。但是当我的无线电组中有多个跨距时，它总是选择第一个跨距。如果无线电组本身的结构发生了变化，所有无线电输入都具有相同的名称，该怎么办？这不是一个更简单的解决方案吗？是的，它会@MadhuGNadig