Question

我的网站上有这个复选框，只要点击它就会切换表格单元格的内容;但是，如果我将复选框放在旁边标签，主标签中的表格，并调整CSS，它似乎不再正常工作，我做错了什么？

在（工作）：

HTML：

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

CSS：

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

之后（不工作）：

HTML：

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

CSS：

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

Answer 1

问题是兄弟选择器，您需要的是 CSS选择器4工作草案< CSS选择器4工作草案<目前不存在的父选择器/ em>而是定义了 subject of selector 的概念，所以一边输入[type = checkbox]：选中！〜主表td：在之前应该有效，但目前任何浏览器都不可用

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

http://jsfiddle.net/InferOn/CnfFE/

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

1 个答案: