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

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 添加了一个隐藏的输入类型。所以我的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

尝试~ 一般的兄弟选择器：

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; }