如果前一个单元格有选中的输入,我需要选择一个表格单元格。我暗暗怀疑 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对于那些想要实时便签本的人。
最佳答案
在当前的 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/
关于html - 表格单元格的 CSS 选择器,在前一个单元格中检查了输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23925453/