asp.net - 具有嵌套元素和 :after 的 css 相邻选择器

Question

这是旧的 HTML

<div class="MainClass">
    <input type="checkbox" name="ppp" id="ppp" class="subClassInput">
    <label for="subClassLabel"></label>
</div>

这是新的 HTML：

<div class="MainClass">
    <span class="subClassInput">
        <input type="checkbox" name="ppp" id="ppp">
    </span>
    <label for="subClassLabel"></label>
</div>

我的 css 工作正常，但我想使用 asp.net 来渲染 asp:CheckBox 并围绕它进行跨度。我想我可以构建一个特殊的控件并覆盖它，但我宁愿修复我的 CSS。

因此，在检查输入后到达标签可以正常工作：

.MainClass input[type=checkbox]:checked + label:after {
 //attributes
 }

但现在我不知道在检查输入后如何到达标签。

谢谢

Answer 1

目前无法在 CSS 或 CSS3中执行<或选择器。:parent否则你可以做这样的事情：

span < input[type=checkbox]:checked + label:after

也许

input[type=checkbox]:checked:parent + label:after

阅读此http://css-tricks.com/parent-selectors-in-css/

Answer 2

由于 OP 要求提供脚本解决方案，因此这里有一个。注意我正在利用 jQuery 库，您需要包含它。

$(function(){
    $('input[type=checkbox]').click(function(){
          if($(this).is(':checked')){
             var label = $(this).parent().siblings('label');
             //apply your CSS styles here
          }
    });
});