CSS相邻选择嵌套元素：

后，这是旧的HTMLCSS相邻选择嵌套元素：

<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的工作。净呈现asp：复选框与周围的跨度。我想我可以构建一个特殊的控件并覆盖它，但我宁愿修正我的CSS。

这样，才能到标签检查输入后运行良好这样的：

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

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

感谢

来源

2013-10-09 Bergkamp

您可以删除'span.subClassInput'还是您需要它？ – LinkinTED

不幸的是，你无法做到这一点。您无法使用CSS选择器恢复树状结构。你唯一的选择是使用JavaScript。 –

@ChrisHardie，谢谢，这听起来很令人失望。有没有人有关于如何做到这一点的想法？我想可能会首先使用以下命令来处理标签：然后处理span +输入。那会工作吗？ – Bergkamp

它目前还无法做到<或:parent选择在CSS或CSS3。否则，你可以做这样的事情：

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

或许

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

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

来源

2013-10-09 14:33:06

由于OP问一个脚本的解决方案，这里是一个。注意我正在利用jQuery库，您将需要包含它。

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

来源

2013-10-09 14:35:12

CSS相邻选择嵌套元素：

回答

相关问题