选中后显示 table 个单元格中的文本

Question

简而言之，我需要创建一个带有复选框和 table 的 html 页面，其中复选框负责显示 table 单元格中的文本。检查标签时，隐藏的信息必须在每个单元格中显示。我已经制作了一个没有任何其他标签的简单代码来查看这是否可行，但是出了点问题并且 .hidden 文本不显示。在这里：

<head>
    <style>
        input[type=checkbox]:checked ~ .hidden {
        display:inline-block;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div class="hidden"><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>

我需要在没有 JS 的情况下完成这段代码希望得到您的帮助

Answer 1

因为 .hidden 不在您的复选框旁边，您必须先引用 table，然后再引用 .hidden 元素，它是 <table> 的子元素.

<head>
    <style>
        input[type=checkbox]:checked ~ table div.hidden {
          display:inline-block !important;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div class="hidden"><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>

选中后显示 table 个单元格中的文本

Revealing text in table cells when checked

html

css

html-table

css-selectors