Question

我的代码的目的是在我选中/取消选中该框时更改颜色的 <td> 部分和表格内的字体，但它不能按预期工作我从here得到的代码。

input[type=checkbox] + td {
    background-color: #FFFFFF;
    color:#000000
} 

input[type=checkbox]:checked + td {
    background-color: #00447C;
    color:#FFFFFF;
}

<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

它在源头工作，所以我对此感到困惑。

Answer 1

CSS中的$PWD选择器选择与前一个选择器相邻的元素。因此+会在以下示例中选择input + td：

<td>

但不是在这一个：

<input />
<td></td>

因此，您的CSS不会指向标记中的现有<div> <input /> </div> <td></td>元素。

编辑：对此的一个（示例）解决方法是省略<td>标记，因为所有符合标准的浏览器都实现了没有<td>的表格。

Answer 2

使用jquery，您可以执行以下操作：

＆＃13;

var checkboxes = $("input[type='checkbox']");

function checkbox_function()
{
/*
  var tr = $(this).parent().parent();
  if ($(tr).hasClass('checked'))
  {
    $(tr).removeClass("checked");
  }
  else
  {
    $(tr).addClass("checked");
  }
*/
  var parent = $(this).parent();
  if ($(this).is(":checked"))
  {
    $(parent).siblings().addClass("checked");
  }
  else
  {
    $(parent).siblings().removeClass("checked");
  }
  
  
}

$.each(checkboxes, function(index, item) {
    $(item).change(checkbox_function);
  });

＆＃13;

tr.unchecked {
    background-color: #FFFFFF;
    color:#000000
} 

tr.checked {
    background-color: #00447C;
    color:#FFFFFF;
}

td{
    background-color: #FFFFFF;
    color:#000000  
}

td.checked{
    background-color: #00447C;
    color:#FFFFFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

＆＃13;

这样做是获取所有复选框，然后将更改侦听器放到它们上面。

（根据自己的喜好编辑）。

Answer 3

css中的加号表示：

选择并设置立即放置在div + p {background：＆＃39; #ffff＆＃39;; }

这意味着在你的情况下，它将选择输入[..]

之后的任何td

Answer 4

加号（+）表示兄弟姐妹，但您的复选框是单元格的子元素，因此您应该使用chevron（＆gt;）或space（）代替。

http://techbrij.com/css-selector-adjacent-child-sibling

但是，您不能基于孩子设置父级样式，只能反过来。因此，您可能不得不求助于javascript来添加/删除单元格中的类。

复选框css / jquery样式更改

4 个答案: