当检查该行中的复选框时，我正在尝试更改单个单个输入元素的样式。我试过很多“~”、“+”的组合，有和没有类标识符，都无济于事。我知道如何使用 Javascript 来创建变通方法，并且我知道 CSS 出于许多充分的原因不允许选择祖先，但我想知道您是否可以以任何方式使用 CSS 来完成此任务。
tr td input {
font-size: 20px;
font-family: helvetica;
padding: 5px;
}
tr td input[type=checkbox]:checked+tr td input.input-item {
color: red;
font-style: italic;
text-decoration: line-through;
}<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
<td class="item-td"><input class="input-item" type="text" value="Amateurs"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
<td class="item-td"><input class="input-item" type="text" value="Barriers"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
<td class="item-td"><input class="input-item" type="text" value="Create"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>最佳答案
不幸的是，现有的 CSS 组合器只允许选择一个公共(public)父元素中的元素，并在源代码顺序中选择靠后的元素。目前无法选择元素的祖先或前一个兄弟元素。因此不可能根据内容的状态(例如 tr )来设置容器的样式(例如 input )。可以根据前一个输入的状态更改下一个输入(如 Ivan 的回答所示)，但前提是它们位于同一容器中，这使得无法将它们格式化为不同的表格单元格(可以这样做)虽然使用 CSS 网格布局，但它需要更扁平的标记结构，因为所有网格项都必须是一个网格容器的子项)。
基于 <label> 的事实，有一个非常糟糕的解决方法。元素可以将点击转移到链接<input>不管它在源代码中的位置。我们可以使实际的复选框不可见，将它们放在表格的之前，然后使用以下兄弟和后代组合器为我们需要的表格的任何部分设置样式，并使标签看起来就像复选框一样。快速演示/概念验证:
tr td input {
font-size: 20px;
font-family: helvetica;
padding: 5px;
}
[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
width: 0;
height: 0;
overflow: hidden;
}
.fake-checkbox {
display: inline-flex;
width: .8em;
height: .8em;
border: 2px inset #ccc;
justify-content: center;
align-content: center;
vertical-align: middle;
}
#checkbox0:checked ~ table [for="checkbox0"]::before,
#checkbox1:checked ~ table [for="checkbox1"]::before,
#checkbox2:checked ~ table [for="checkbox2"]::before {
content: '✔';
line-height: 1;
}
#checkbox0:checked ~ table #checkbox0-tr td input.input-item,
#checkbox1:checked ~ table #checkbox1-tr td input.input-item,
#checkbox2:checked ~ table #checkbox2-tr td input.input-item {
color: red;
font-style: italic;
text-decoration: line-through;
}<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox0">
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox1">
<input type="checkbox" name="checklist-list" class="checkbox-box" id="checkbox2">
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<tr id="checkbox0-tr">
<td class="checkbox-td"><label for="checkbox0" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
<td class="item-td"><input class="input-item" type="text" value="Amateurs"></td>
</tr>
<tr id="checkbox1-tr">
<td class="checkbox-td"><label for="checkbox1" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
<td class="item-td"><input class="input-item" type="text" value="Barriers"></td>
</tr>
<tr id="checkbox2-tr">
<td class="checkbox-td"><label for="checkbox2" class="fake-checkbox"></label></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
<td class="item-td"><input class="input-item" type="text" value="Create"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>但老实说，我不建议在生产中使用这种方法。
关于css - 使用 CSS 更改选中的 html 表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45327288/