Html 更改表格单元格内容的CSS复选框

我在我的网站上有一个复选框，它可以在点击时切换表格单元格的内容；但是，如果我将复选框放在一个旁侧标记中，将表放在一个主标记中，并调整CSS，它似乎不再正常工作，我做错了什么

工作前：

HTML:

之后（不工作）：

HTML:

问题是同级选择器，您需要的应该是一个父选择器，目前不存在，在CSS选择器4工作草案中，定义了的概念是，这样除了输入[type=checkbox]：选中！~主表td:before应该可以工作，但当前任何浏览器都无法使用

<aside>
    <input type="checkbox" />
    <main>
        <table>
            <caption>Table</caption>
            <tr>
                <td data-one="Data One" data-two="Data 2"></td>
            </tr>
        </table>
    </main>
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        </tr>
    </table>
</main>

---

在Chrome中测试，您的后标记/css对我有效。你在测试哪个浏览器？哦，我明白了，所以复选框现在不能放在它自己的旁边标记中。很高兴听到CSS4在未来将实现这一点。另一方面，我认为HTML5中的自动关闭标签实际上不起作用，因为
与
不同，而
实际上与相同。它们真的有用吗？
input[type=checkbox]{
    display:block;
    visibility:hidden;
    width:0;
    margin:0;
    cursor:pointer;
}

input[type=checkbox]:after{
    position:fixed;
    left:0;
    display:block;
    visibility:visible;
    width:10%;
    padding:.5em 0;
    text-align:center;
}

input[type=checkbox]:after{
    content:"Data 1";
    background:#FCC;
}

input[type=checkbox]:checked:after{
    content:"Data 2";
    background:#CCF;
}

input[type=checkbox]:checked ~ table td:before{
    content:attr(data-two);
}

td:before{
    display:block;
    content:attr(data-one);
}

<aside>
    <input type="checkbox">
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        <tr>
    </table>
</main>

input[type=checkbox]{
    display:block;
    visibility:hidden;
    width:0;
    margin:0;
    cursor:pointer;
}

input[type=checkbox]:after{
    position:fixed;
    left:0;
    display:block;
    visibility:visible;
    width:10%;
    padding:.5em 0;
    text-align:center;
}

input[type=checkbox]:after{
    content:"Data 1";
    background:#FCC;
}

input[type=checkbox]:checked:after{
    content:"Data 2";
    background:#CCF;
}

aside input[type=checkbox]:checked ~ main table td:before{ /*This part is not working*/
    content:attr(data-two);
}

td:before{
    display:block;
    content:attr(data-one);
}

<aside>
    <input type="checkbox" />
    <main>
        <table>
            <caption>Table</caption>
            <tr>
                <td data-one="Data One" data-two="Data 2"></td>
            </tr>
        </table>
    </main>
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        </tr>
    </table>
</main>