Question

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

当不活动时，我希望文本的一部分是标准颜色，而另一些文本则是不同的颜色，所以我在该范围内有一个跨度。

一旦激活，样式就会在文本上发生变化，使其变为更大胆的字体并且全部变为橙色。但内部跨度不受影响。

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

<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;
}

在p标签中设置整行文本样式对我正在做的事情不起作用。

Answer 1

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

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

+用于在input之后直接选择相邻的兄弟。 >用于选择与span的相邻兄弟span的子input。

Sample Fiddle

跨度内的CSS冲突 - 无法解决。任何提供解决方案？

1 个答案: