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ことです。spaninput

サンプルフィドル

于 2013-09-06T16:44:27.727 に答える