與選擇

Question

我有一個表，並與其他元素的CSS兄弟，當你按下一個細胞改變其顏色：

HTML

<table id="hours"> 
    <tr> 
    <td> 
     <div> 
     <input type="checkbox" id="checkHourR01C01" /> 
     <label for="checkHourR01C01"> </label> 
     </div> 
    </td> 
    ... 

CSS

table#hours input[type=checkbox] { visibility: hidden; } 
table#hours input[type=checkbox]:checked + label { background-color: blue; } 

這工作完美。現在的問題是我正在使用ASP MVC 3，而Html.CheckboxFor添加了隱藏的輸入類型。所以我的HTML結構是這樣的：

HTML

<table id="hours"> 
    <tr> 
    <td> 
     <div> 
     <input data-val="true" data-val-required="The Selected field is required." id="Days_0__Hours_0__Selected" name="Days[0].Hours[0].Selected" type="checkbox" value="true" /> 
     <input name="Days[0].Hours[0].Selected" type="hidden" value="false" /> 
     <label for="Days_0__Hours_0__Selected"> </label> 
     </div> 
    </td> 
    ... 

所以現在是這樣的：

table#hours input[type=checkbox]:checked input[type=hidden] + label { background-color: blue; } 

但這doesn't工作。有沒有辦法用CSS修復它，或者我需要改變爲jQuery？

Answer 1

嘗試~general sibling selector：

table#hours input[type=checkbox]:checked input[type=hidden] ~ label { background-color: blue; } 

Answer 2

label仍是checkbox的兄弟，它只是不相鄰。嘗試您的原始CSS，但使用~而不是+。

table#hours input[type=checkbox]:checked ~ label { background-color: blue; }