Question

我有一张桌子，当你按下一个单元格时，它会改变颜色：

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添加了隐藏的antoher inputy类型。所以我的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; }

但这不起作用。有没有办法用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; }

css与选择器之间的另一个元素兄弟姐妹

2 个答案: