1

我有一个带有文本的单选按钮和一个环绕的标签，以便在单击文本或按钮时它变为活动状态。

当不活动时，我希望部分文本为标准颜色，而其他一些文本为不同颜色，因此我在该跨度内有一个跨度。

激活后，文本的样式会发生变化，使其成为更粗的字体并且全部为橙色。但内部跨度不受影响。

有人可以帮忙吗？替代内部文本？

<label class="label-name">
    <input type="radio" name="group1" class="class-name" />
    <span>Lorem <span class="light-grey">Ipsum</span></span>
</label>

&

.class-name input:checked + span {
  font-family: "bold-font-family", sans-serif;  
  color: #f26900 !important;
}

.light-grey {
  color: #838383;
  display: inline;
}

在 ap 标签中设置整行文本的样式不适用于我正在做的事情。

4

1 回答 1

3

您也可以使用以下内容将样式应用于内部span。

:checked + span, :checked + span > span {
  font-family: "bold-font-family", sans-serif;  
  color: #f26900;
}

+ 用于在 . 之后直接选择相邻的兄弟姐妹input。>是选择 的 的子span级，span即 的相邻兄弟input。

样品小提琴

于 2013-09-06T16:44:27.727 回答