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相鄰選擇嵌套元素：

回答

相關問題