html - 表格单元格的 CSS 选择器，在前一个单元格中检查了输入

Question

如果前一个单元格有选中的输入，我需要选择一个表格单元格。我暗暗怀疑 CSS 不可能做到这一点，有人可以证实吗？

这是一个例子:

<table>
    <tr>
        <td>Row with checked input</td>
        <td><input type=checkbox checked /></td>
        <td>should show.</td>
    </tr>
    <tr>
        <td>Row with unchecked input</td>
        <td><input type=checkbox /></td>
        <td>should be hidden.</td>
    </tr>
</table>

还有我试过的 CSS:

td:last-child { display:none; }
input:checked ~ td:last-child { display:initial; }

第一个选择器用于隐藏未选中的输入，但第二个选择器无法使输入再次显示。我假设 ~ 组合器不能处理以前 sibling 的 child 。有什么方法可以使用 CSS 来解决这个问题，还是我需要使用一些 JavaScript 解决方案？

JSFiddle对于那些想要实时便签本的人。

Answer 1

在当前的 HTML 中这是不可能的，因为 CSS 无法回溯到其父级。 IE。输入的伪选择器不能影响父 td 并且 following 不能影响父的兄弟。

如果您对 HTML 比较灵活，则可以将可隐藏元素作为同级元素包含在同一个表格单元格中。

<table>
<tr>
    <td>Row with checked input</td>
    <td><input type=checkbox checked /><span>should show.</span></td>
</tr>
<tr>
    <td>Row with unchecked input</td>
    <td><input type=checkbox /><span>should be hidden.</span></td>
</tr>
</table>

CSS

input:not(:checked) + span { display:none; }

我把它扔进了 JSFiddle http://jsfiddle.net/MghmU/