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

第一个选择器用于隐藏未经检查的输入，但第二个选择器无法再次显示输入。我假设~组合子无法处理以前兄弟姐妹的孩子。有没有办法使用CSS解决这个问题，还是需要使用一些JavaScript解决方案？

JSFiddle适用于那些想要实时暂存器的用户。

Answer 1

使用当前的HTML无法实现，因为CSS无法回溯到其父级。 I.E.输入的伪选择器不会影响父td，并且跟随不会影响父母的兄弟。

如果您对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/

Answer 2

这不能用CSS完成，并且据我所知还有完整的浏览器支持。因此，根据您需要支持的浏览器，您可能需要某种事件侦听器/处理程序以确保跨浏览器兼容性。您很可能想要使用JavaScript解决方案。如果您熟悉jQuery，那将是处理任务的最简单方法。

jQuery（“：checked”） - ＆gt;查看api here.

然后，您可以为.hide和.show编写简单的函数。这些也可以在api文档中找到。

根据W3schools.com

，我目前仅支持Opera检查选择器

表单元格的CSS选择器，在前一个单元格中具有已检查的输入

2 个答案: