是否可以使用 CSS 动态更改单选按钮上的字体？

Question

我试图用 jquery (How do I get javascript to run more than once?) 来做到这一点，但有些人说用 CSS 可以更容易地做到这一点。 Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected.这用于用图像替换按钮。

有没有办法使用 CSS 以便在添加 ez-selected 类时将 span 标签中的文本变为粗体，然后在删除 ez-selected 类时移除粗体？我无法更改 HTML 结构，因为它已编码在我的购物车软件中。谢谢！

编辑：是否有任何类型的 CSS 选择器可以设置最接近检查输入的跨度样式？我知道 + 它可以在另一个元素之后选择一个元素，但是有没有办法在选中的单选按钮之后选择下一个跨度元素，即使该跨度在另一个 div 中？

  <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio (ez-selected)">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

Answer 1

.ez-selected div 不是跨度的先前兄弟或父...所以 NO...你不能。

不是这种结构

  <div class="row">
        <input name="TXT870" type="hidden" value="Option 1">
        <div class="col-xs-2">
            <div class="ez-radio ez-selected">
                <input class="clearBorder ez-hide" name="CAG3" onclick=
                "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
                type="radio" value="870_625_0_625">
            </div><input name="CAG3QF1" type="hidden" value="0">
        </div>
        <div class="col-xs-7">
            <span>Option 1</span> <input class="transparentField" name=
            "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
        </div>
    </div>

您必须先遍历 DOM，而 CSS 无法做到这一点，因为没有 parent selector