Question

我需要设置span元素的样式，但仅当前一个兄弟div元素中的子元素处于活动状态时（即已选中单选按钮）。

我无法修改代码。只能使用CSS。

有什么想法吗？

<label class="One">
    <span class="Two">
        <div class="Three">
            <input class="Four" type="radio">
            <a class="Five ui-state-default"></a>
        </div>
        <span class="Six">Don't highlight this</span>
    </span>
</label>
<label class="One">
    <span class="Two">
        <div class="Three">
            <input class="Four" type="radio">
            <a class="Five ui-state-active"></a>
        </div>
        <span class="Six">Highlight this</span>
    </span>
</label>

需要突出显示span.Six但仅在a.Five显示“ui-state-active”时才显示。

另一种选择，如果更容易，我可以突出显示标签元素（即上面的第二个“label.One”），但如果子元素3降级为“活动”，则再次仅。 ......

感谢帮助

Answer 1

鉴于您无法修改代码的条件，并且您必须仅使用CSS，因此无法获得预期结果。您可以使用Javascript或修改HTML。但是，您可以借助伪元素来实现您想要的效果。伪元素的内容可以根据CSS规则进行更改。

input:checked~a:after {
  content: "I am active";
  display: block;
  color: red;
}

以下是我建议的演示： http://jsfiddle.net/GCu2D/3626/

您可以以任何方式设置伪元素的样式。

如果是javascript，您可以从这里开始：

 $(document).ready(function() {
  $("input").on("change", function() {
    var elem = $(this);
    elem.parents("label:first").find(".Six").toggleClass("active")
  });
});

演示：http://jsfiddle.net/GCu2D/3628/

元素上的自定义CSS受前一个兄弟元素中的子元素状态的影响

1 个答案: